/* Kinergon brand variables. Default energy state: Kinetic Blue.
   Switch state with [data-brand="lime"] / [data-brand="orange"] on any ancestor. */
:root {
  /* --- neutrals (shared by all three states) --- */
  --kg-neutral-100: #E3E7EF;
  --kg-neutral-200: #C7CEDC;
  --kg-neutral-300: #A7B1C4;
  --kg-neutral-400: #8A93A8;
  --kg-neutral-500: #6B7689;
  --kg-neutral-600: #5B6678;
  --kg-neutral-700: #3A4557;
  --kg-neutral-800: #222D3F;
  --kg-neutral-900: #16233C;
  --kg-neutral-950: #0A1426;
  --kg-neutral-000: #FFFFFF;
  --kg-neutral-050: #F6F8FC;

  /* --- semantic --- */
  --kg-success: #22C55E;
  --kg-warning: #F5B301;
  --kg-danger: #EF4444;
  --kg-info: #06B6D4;

  /* --- type --- */
  --kg-font-display: 'Plus Jakarta Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --kg-font-text: 'Manrope', 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --kg-font-data: 'Space Grotesk', 'Manrope', ui-monospace, sans-serif;
  --kg-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --kg-text-xs: 12px;  --kg-leading-xs: 1.5;  --kg-tracking-xs: 0.01em;
  --kg-text-sm: 14px;  --kg-leading-sm: 1.5;  --kg-tracking-sm: 0.005em;
  --kg-text-base: 16px;  --kg-leading-base: 1.6;  --kg-tracking-base: 0em;
  --kg-text-md: 18px;  --kg-leading-md: 1.55;  --kg-tracking-md: 0em;
  --kg-text-lg: 20px;  --kg-leading-lg: 1.45;  --kg-tracking-lg: -0.005em;
  --kg-text-xl: 25px;  --kg-leading-xl: 1.35;  --kg-tracking-xl: -0.01em;
  --kg-text-2xl: 31px;  --kg-leading-2xl: 1.25;  --kg-tracking-2xl: -0.015em;
  --kg-text-3xl: 39px;  --kg-leading-3xl: 1.2;  --kg-tracking-3xl: -0.02em;
  --kg-text-4xl: 49px;  --kg-leading-4xl: 1.12;  --kg-tracking-4xl: -0.022em;
  --kg-text-5xl: 61px;  --kg-leading-5xl: 1.06;  --kg-tracking-5xl: -0.025em;
  --kg-text-6xl: 76px;  --kg-leading-6xl: 1.02;  --kg-tracking-6xl: -0.028em;

  /* --- radius / space --- */
  --kg-radius-xs: 4px;
  --kg-radius-sm: 8px;
  --kg-radius-md: 12px;
  --kg-radius-lg: 16px;
  --kg-radius-xl: 24px;
  --kg-radius-2xl: 32px;
  --kg-radius-pill: 999px;
  --kg-space-0: 0px;
  --kg-space-1: 4px;
  --kg-space-2: 8px;
  --kg-space-3: 12px;
  --kg-space-4: 16px;
  --kg-space-5: 24px;
  --kg-space-6: 32px;
  --kg-space-7: 48px;
  --kg-space-8: 64px;
  --kg-space-9: 96px;
  --kg-space-10: 128px;

  /* --- default energy state: Kinetic Blue --- */
  --kg-primary: #2563FF;
  --kg-accent: #06B6D4;
  --kg-base: #0A1426;
  --kg-surface: #111C33;
  --kg-surface-raised: #16233C;
  --kg-tint: #E8EFFF;
  --kg-on-base: #FFFFFF;
  --kg-on-primary: #FFFFFF;
  --kg-gradient-mark: linear-gradient(225deg, #06B6D4 0%, #2563FF 78%);
  --kg-gradient-surface: linear-gradient(160deg, #0A1426 0%, #16233C 100%);
}

[data-brand="lime"] {
  --kg-primary: #B6F23A;
  --kg-accent: #22D3EE;
  --kg-base: #0B1512;
  --kg-surface: #12201B;
  --kg-surface-raised: #1A2C24;
  --kg-tint: #F1FBDD;
  --kg-on-base: #FFFFFF;
  --kg-on-primary: #0B1512;
  --kg-gradient-mark: linear-gradient(225deg, #22D3EE 0%, #B6F23A 78%);
  --kg-gradient-surface: linear-gradient(160deg, #0B1512 0%, #1A2C24 100%);
}

[data-brand="orange"] {
  --kg-primary: #FF6B2C;
  --kg-accent: #FF9F43;
  --kg-base: #0F1419;
  --kg-surface: #1A2027;
  --kg-surface-raised: #242C35;
  --kg-tint: #FFEDE2;
  --kg-on-base: #FFFFFF;
  --kg-on-primary: #0F1419;
  --kg-gradient-mark: linear-gradient(225deg, #FF9F43 0%, #FF6B2C 78%);
  --kg-gradient-surface: linear-gradient(160deg, #0F1419 0%, #242C35 100%);
}

/* motion bar of the mark, per background polarity */
:root {
  --kg-motion-from: #8A93A8;
  --kg-motion-to: #5B6678;
}
[data-polarity="light"] {
  --kg-motion-from: #6B7689;
  --kg-motion-to: #3A4557;
}