/**
 * OrkaOS design tokens — landing bridge
 * Source of truth: references/design-system/01-foundations.html
 * Landing keeps legacy aliases (--canvas, --ink, --link, …) mapped to semantic tokens.
 */

:root {
  /* ---- color ramps ---- */
  --orka-blue-50: #F1F8FE;
  --orka-blue-100: #E7F2FD;
  --orka-blue-200: #C6E2FA;
  --orka-blue-300: #86BEF2;
  --orka-blue-400: #5AA8EE;
  --orka-blue-500: #3D9BF0;
  --orka-blue-600: #1E8FEC;
  --orka-blue-700: #1573C6;
  --orka-blue-800: #0A3B73;
  --orka-blue-900: #0A3463;

  --orka-neutral-0: #FFFFFF;
  --orka-neutral-25: #F8FBFF;
  --orka-neutral-50: #F2F7FD;
  --orka-neutral-100: #E9F1FB;
  --orka-neutral-150: #E2EAF3;
  --orka-neutral-200: #CBD8E8;
  --orka-neutral-300: #9FB0C6;
  --orka-neutral-400: #7587A0;
  --orka-neutral-500: #5E7187;
  --orka-neutral-600: #41566F;
  --orka-neutral-700: #243B57;
  --orka-neutral-800: #142C4B;
  --orka-neutral-850: #0F2440;
  --orka-neutral-900: #0A2A52;
  --orka-neutral-950: #06182E;
  --orka-fin: #0E2742;

  --orka-indigo-500: #5B6CF5;
  --orka-teal-500: #15B5C2;
  --orka-green-500: #16C784;
  --orka-green-600: #0FA76C;
  --orka-green-100: #E2F8EF;
  --orka-amber-500: #FFB020;
  --orka-amber-600: #E0930A;
  --orka-amber-100: #FFF3DC;
  --orka-red-500: #EA4335;
  --orka-red-600: #CB2D20;
  --orka-red-100: #FCE5E3;

  --c1: #1E8FEC;
  --c2: #15B5C2;
  --c3: #5B6CF5;
  --c4: #16C784;
  --c5: #F5A623;
  --c6: #8B5CF6;
  --c7: #F2657A;
  --c8: #38BDF8;

  /* ---- type ---- */
  --font-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, "Roboto Mono", monospace;

  --fs-2xs: 0.6875rem;
  --fs-xs: 0.75rem;
  --fs-sm: 0.8125rem;
  --fs-base: 0.875rem;
  --fs-md: 0.9375rem;
  --fs-lg: 1rem;
  --fs-xl: 1.125rem;
  --fs-2xl: 1.25rem;
  --fs-3xl: 1.5rem;
  --fs-4xl: 1.875rem;
  --fs-5xl: 2.25rem;
  --fs-6xl: 2.75rem;
  --fs-7xl: 3.5rem;
  --fs-8xl: 4.25rem;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;
  --fw-black: 900;

  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-normal: 1.5;
  --lh-relaxed: 1.65;
  --ls-tighter: -0.02em;
  --ls-tight: -0.012em;
  --ls-normal: 0;
  --ls-wide: 0.02em;
  --ls-wider: 0.08em;

  /* ---- spacing (4px) ---- */
  --space-0: 0px;
  --space-1: 4px;
  --space-2: 8px;
  --space-2-5: 10px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* ---- radius ---- */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 30px;
  --radius-2xl: 40px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* ---- motion ---- */
  --dur-fast: 140ms;
  --dur-normal: 220ms;
  --dur-slow: 360ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --opacity-4: 0.04;
  --opacity-8: 0.08;
  --opacity-12: 0.12;
  --opacity-16: 0.16;
  --opacity-24: 0.24;
  --opacity-38: 0.38;
  --opacity-60: 0.6;
  --opacity-87: 0.87;

  /* Marketing metric grammar */
  --metric-up: var(--success-text);
  --metric-down: var(--error-text);
  --metric-realized: var(--success-text);
  --metric-unrealized: var(--error-text);
}

/* ---- Semantic: light (explicit) ---- */
:root,
:root[data-theme="light"],
[data-theme="light"] {
  color-scheme: light;

  --bg-canvas: var(--orka-neutral-0);
  --bg-surface: var(--orka-neutral-25);
  --bg-surface-raised: var(--orka-neutral-0);
  --bg-surface-sunken: var(--orka-neutral-50);
  --bg-subtle: var(--orka-neutral-50);
  --bg-muted: var(--orka-neutral-100);
  --bg-inverse: var(--orka-neutral-850);
  --bg-overlay: rgba(6, 24, 46, 0.55);

  --text-primary: var(--orka-neutral-850);
  --text-secondary: var(--orka-neutral-600);
  --text-tertiary: var(--orka-neutral-500);
  --text-disabled: var(--orka-neutral-300);
  --text-inverse: var(--orka-neutral-0);
  --text-on-brand: var(--orka-neutral-0);

  --border-subtle: var(--orka-neutral-150);
  --border-default: var(--orka-neutral-200);
  --border-strong: var(--orka-neutral-300);

  --brand: var(--orka-blue-600);
  --brand-hover: var(--orka-blue-700);
  --brand-active: var(--orka-blue-800);
  --brand-text: var(--orka-blue-700);
  --brand-subtle: var(--orka-blue-100);
  --brand-border: var(--orka-blue-200);
  --brand-ring: rgba(30, 143, 236, 0.4);

  --success-text: var(--orka-green-600);
  --success-solid: var(--orka-green-500);
  --success-subtle: var(--orka-green-100);
  --warning-text: var(--orka-amber-600);
  --warning-solid: var(--orka-amber-500);
  --warning-subtle: var(--orka-amber-100);
  --error-text: var(--orka-red-600);
  --error-solid: var(--orka-red-500);
  --error-subtle: var(--orka-red-100);

  --shadow-xs: 0 1px 2px rgba(15, 36, 64, 0.12);
  --shadow-sm: 0 2px 10px rgba(15, 36, 64, 0.1);
  --shadow-lg: 0 16px 32px -16px rgba(15, 36, 64, 0.16);
  --focus-ring: 0 0 0 3px var(--brand-ring);

  --ai-surface: #EFF0FE;
  --ai-border: #CFD4F4;
  --ai-border-hover: #B4BBF6;
  --ai-row-bg: #E3E5FD;
  --ai-accent-text: #4553D6;

  --topbar-bg: rgba(255, 255, 255, 0.55);
  --section-tint: rgba(15, 36, 64, 0.035);
  --decor-line: rgba(30, 143, 236, 0.22);

  /* Landing aliases */
  --canvas: var(--bg-canvas);
  --canvas-deep: var(--bg-surface-sunken);
  --surface: var(--bg-surface);
  --surface-alt: var(--bg-subtle);
  --surface-hover: var(--bg-muted);
  --border: var(--border-default);
  --border-hover: var(--border-strong);
  --ink: var(--text-primary);
  --ink-secondary: var(--text-secondary);
  --ink-tertiary: var(--text-tertiary);
  --link: var(--brand-text);
  --placeholder: var(--text-disabled);
  --brand-tint-bg: var(--brand-subtle);
  --brand-tint-border: var(--brand-border);
}

/* ---- Semantic: dark (site default) ---- */
:root[data-theme="dark"],
[data-theme="dark"] {
  color-scheme: dark;

  --bg-canvas: #06182E;
  --bg-surface: var(--orka-fin);
  --bg-surface-raised: #143251;
  --bg-surface-sunken: #061320;
  --bg-subtle: #112B49;
  --bg-muted: #16314F;
  --bg-inverse: var(--orka-neutral-50);
  --bg-overlay: rgba(2, 10, 20, 0.66);

  --text-primary: #F2F7FD;
  --text-secondary: #9FB0C6;
  --text-tertiary: #7387A3;
  --text-disabled: #4C627E;
  --text-inverse: var(--orka-neutral-850);
  --text-on-brand: #06182E;

  --border-subtle: #16314F;
  --border-default: #1E3A5C;
  --border-strong: #2C4E76;

  --brand: var(--orka-blue-500);
  --brand-hover: var(--orka-blue-400);
  --brand-active: var(--orka-blue-300);
  --brand-text: var(--orka-blue-300);
  --brand-subtle: rgba(30, 143, 236, 0.16);
  --brand-border: rgba(30, 143, 236, 0.42);
  --brand-ring: rgba(86, 168, 238, 0.55);

  --success-text: #4ED8A1;
  --success-solid: var(--orka-green-500);
  --success-subtle: rgba(22, 199, 132, 0.15);
  --warning-text: #FFC861;
  --warning-solid: var(--orka-amber-500);
  --warning-subtle: rgba(255, 176, 32, 0.15);
  --error-text: #F58A80;
  --error-solid: var(--orka-red-500);
  --error-subtle: rgba(234, 67, 53, 0.16);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.28);
  --shadow-lg: 0 12px 32px -16px rgba(0, 0, 0, 0.6);
  --focus-ring: 0 0 0 3px var(--brand-ring);

  --ai-surface: #1E3055;
  --ai-border: #2C3C73;
  --ai-border-hover: #4A5397;
  --ai-row-bg: #27386B;
  --ai-accent-text: #A5AEFB;

  --topbar-bg: rgba(14, 39, 66, 0.42);
  --section-tint: rgba(6, 19, 32, 0.55);
  --decor-line: rgba(30, 143, 236, 0.3);

  --canvas: var(--bg-canvas);
  --canvas-deep: var(--bg-surface-sunken);
  --surface: var(--bg-surface);
  --surface-alt: var(--bg-subtle);
  --surface-hover: var(--bg-surface-raised);
  --border: var(--border-default);
  --border-hover: var(--border-strong);
  --ink: var(--text-primary);
  --ink-secondary: var(--text-secondary);
  --ink-tertiary: var(--text-tertiary);
  --link: var(--brand-text);
  --placeholder: var(--text-disabled);
  --brand-tint-bg: var(--brand-subtle);
  --brand-tint-border: var(--brand-border);
}