/* AI Relay Labs design tokens — Facet (gold / red / green prism) Light / Dark / System via color-scheme + data-theme + prefers-color-scheme fallback. Brand: Facet mark; light-mode yellow *text* uses #8B6914 (AA); primary button stays #E8C547 + dark text. */
:root {
  color-scheme: light dark;

  /* ===== Brand ===== */
  --brand-name: "AI Relay Labs";

  /* ===== Facet prism (fixed brand faces) ===== */
  --facet-y: #E8C547; /* top */
  --facet-y-hi: #F3D76A;
  --facet-y-lo: #C9A63A;
  --facet-r: #E24B4B; /* left */
  --facet-r-hi: #F06A6A;
  --facet-g: #2DB88A; /* right */
  --facet-g-hi: #4DD4A4;

  /* ===== Gold / primary scale ===== */
  --y-50:  #FBF6E8;
  --y-100: #F5EDD4;
  --y-200: #EBD9A0;
  --y-300: #E0C56C;
  --y-400: #F3D76A;
  --y-500: #E8C547; /* brand mid / primary button fill */
  --y-600: #C9A63A;
  --y-700: #A68528;
  --y-800: #8B6914; /* light-mode text yellow (AA) */
  --y-900: #6B5010;
  --y-950: #3D2E08;

  /* ===== Secondary / accent (prism companions) ===== */
  --sec-500: #2DB88A; /* facet green */
  --sec-600: #1F9470;
  --acc-500: #E24B4B; /* facet red — sparingly */
  --acc-600: #C93C3C;

  /* ===== Neutral (warm paper / near-black) ===== */
  --n-0:   #FFFFFF;
  --n-50:  #F7F6F2;
  --n-100: #F1F0EA;
  --n-200: #E8E6DE;
  --n-300: #D4D2C8;
  --n-400: #A8A8AE;
  --n-500: #8E8E96;
  --n-600: #5C5C64;
  --n-700: #47474F;
  --n-800: #1C1C20;
  --n-900: #101014;
  --n-950: #08080C;

  /* ===== Semantic fixed ===== */
  --success-light: #1F9470;
  --success-dark: #2DB88A;
  --warning-light: #A04A06;
  --warning-dark: #FCD34D;
  --error-light:   #C93C3C;
  --error-dark:   #E24B4B;
  --info-light:    #2563EB;
  --info-dark:    #60A5FA;

  /* ===== Type / space / radius / motion ===== */
  --font-sans: "Geist", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --fs-11: 11px;
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-15: 15px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-24: 24px;
  --fs-28: 28px;
  --fs-32: 32px;
  --fs-40: 40px;
  --fs-48: 48px;
  --fs-56: 56px;
  --fs-display: clamp(2.75rem, 7vw, 5.25rem);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-pill: 999px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-sheet: cubic-bezier(0.32, 0.72, 0, 1);
  --dur-1: 100ms;
  --dur-2: 160ms;
  --dur-3: 240ms;
  --dur-4: 400ms;
  --dur-5: 900ms;
  --shadow-1: 0 1px 2px rgb(10 10 14 / .06), 0 1px 1px rgb(10 10 14 / .04);
  --shadow-2: 0 2px 4px rgb(10 10 14 / .06), 0 12px 28px -10px rgb(10 10 14 / .14);
  --shadow-3: 0 24px 64px -16px rgb(10 10 14 / .28), 0 4px 12px rgb(10 10 14 / .08);
}

:root[data-theme="light"] {
  color-scheme: light;
}

:root[data-theme="dark"]  {
  color-scheme: dark;
}

@supports (color: light-dark(#000, #fff)) {
  :root {
    --bg:              light-dark(#F7F6F2, #08080C);
    --bg-elevated:     light-dark(#FBFAF6, #0A0A0E);
    --surface:         light-dark(#FFFFFF, #101014);
    --surface-2:       light-dark(#F1F0EA, #161618);
    --surface-3:       light-dark(#E8E6DE, #1C1C20);
    --border:          light-dark(rgb(10 10 14 / .08), rgb(255 255 255 / .07));
    --border-strong:   light-dark(rgb(10 10 14 / .14), rgb(255 255 255 / .12));
    --text-primary:    light-dark(#0A0A0E, #F5F5F8);
    --text-secondary:  light-dark(#47474F, #A8A8AE);
    --text-muted:      light-dark(#5C5C64, #8E8E96);
    /* primary = gold; light text uses AA brown-gold #8B6914 */
    --primary:         light-dark(#8B6914, #E8C547);
    --primary-hover:   light-dark(#A68528, #F3D76A);
    --primary-active:  light-dark(#6B5010, #C9A63A);
    --primary-tint:    light-dark(#F5EDD4, #1A1810);
    --primary-line:    light-dark(rgb(184 150 46 / .32), rgb(232 197 71 / .38));
    --primary-fg:      light-dark(#0A0A0E, #0A0A0E); /* on #E8C547 button */
    --secondary:       light-dark(#1F9470, #2DB88A);
    --accent:          light-dark(#C93C3C, #E24B4B);
    --success:         light-dark(#1F9470, #2DB88A);
    --success-text:    light-dark(#1A7A5C, #4DD4A4);
    --success-tint:    light-dark(#E4F5EE, #0E1F19);
    --warning:         light-dark(#A04A06, #FCD34D);
    --warning-text:    light-dark(#A04A06, #FCD34D);
    --warning-tint:    light-dark(#FDF3E3, #2A2010);
    --error:           light-dark(#C93C3C, #E24B4B);
    --error-text:      light-dark(#B83838, #F07070);
    --error-tint:      light-dark(#FCEAEA, #241014);
    --info:            light-dark(#2563EB, #60A5FA);
    --info-text:       light-dark(#1D4ED8, #93C5FD);
    --info-tint:       light-dark(#DBEAFE, #0F1A2E);
    --focus-ring:      light-dark(#8B6914, #E8C547);
    /* Primary button: solid Facet gold + dark text (both themes) */
    --btn-primary-bg:  light-dark(#E8C547, #E8C547);
    --btn-primary-fg:  light-dark(#0A0A0E, #0A0A0E);
    --btn-primary-hover: light-dark(#F3D76A, #F3D76A);
    --btn-secondary-bg: light-dark(#FFFFFF, #161618);
    --btn-secondary-hover: light-dark(#F7F6F2, #1C1C20);
    --btn-ghost-border: light-dark(rgb(10 10 14 / .16), rgb(255 255 255 / .18));
    --glow:            light-dark(rgb(232 197 71 / .10), rgb(232 197 71 / .16));
    --scrim:           light-dark(rgb(10 10 14 / .28), rgb(0 0 0 / .62));
    --skeleton:        light-dark(#ECECF1, #191922);
    --skeleton-hi:     light-dark(#F7F6F2, #27272F);
    --hi:              light-dark(rgb(255 255 255 / .9), rgb(255 255 255 / .045));
    --sc:              light-dark(rgb(10 10 14 / .06), rgb(0 0 0 / .45));
    --sc-2:            light-dark(rgb(10 10 14 / .12), rgb(0 0 0 / .65));
    --dock:            light-dark(rgb(255 255 255 / .84), rgb(16 16 20 / .80));
  }
}

@supports not (color: light-dark(#000, #fff)) {
  :root, :root[data-theme="dark"] {
    --bg: #08080C;
    --bg-elevated: #0A0A0E;
    --surface: #101014;
    --surface-2: #161618;
    --surface-3: #1C1C20;
    --border: rgb(255 255 255 / .07);
    --border-strong: rgb(255 255 255 / .12);
    --text-primary: #F5F5F8;
    --text-secondary: #A8A8AE;
    --text-muted: #8E8E96;
    --primary: #E8C547;
    --primary-hover: #F3D76A;
    --primary-active: #C9A63A;
    --primary-tint: #1A1810;
    --primary-line: rgb(232 197 71 / .38);
    --primary-fg: #0A0A0E;
    --secondary: #2DB88A;
    --accent: #E24B4B;
    --success: #2DB88A;
    --success-text: #4DD4A4;
    --success-tint: #0E1F19;
    --warning: #FCD34D;
    --warning-text: #FCD34D;
    --warning-tint: #2A2010;
    --error: #E24B4B;
    --error-text: #F07070;
    --error-tint: #241014;
    --info: #60A5FA;
    --info-text: #93C5FD;
    --info-tint: #0F1A2E;
    --focus-ring: #E8C547;
    --btn-primary-bg: #E8C547;
    --btn-primary-fg: #0A0A0E;
    --btn-primary-hover: #F3D76A;
    --btn-secondary-bg: #161618;
    --btn-secondary-hover: #1C1C20;
    --btn-ghost-border: rgb(255 255 255 / .18);
    --glow: rgb(232 197 71 / .16);
    --scrim: rgb(0 0 0 / .62);
    --skeleton: #191922;
    --skeleton-hi: #27272F;
    --hi: rgb(255 255 255 / .045);
    --sc: rgb(0 0 0 / .45);
    --sc-2: rgb(0 0 0 / .65);
    --dock: rgb(16 16 20 / .80);
  }

  :root[data-theme="light"] {
    --bg: #F7F6F2;
    --bg-elevated: #FBFAF6;
    --surface: #FFFFFF;
    --surface-2: #F1F0EA;
    --surface-3: #E8E6DE;
    --border: rgb(10 10 14 / .08);
    --border-strong: rgb(10 10 14 / .14);
    --text-primary: #0A0A0E;
    --text-secondary: #47474F;
    --text-muted: #5C5C64;
    --primary: #8B6914;
    --primary-hover: #A68528;
    --primary-active: #6B5010;
    --primary-tint: #F5EDD4;
    --primary-line: rgb(184 150 46 / .32);
    --primary-fg: #0A0A0E;
    --secondary: #1F9470;
    --accent: #C93C3C;
    --success: #1F9470;
    --success-text: #1A7A5C;
    --success-tint: #E4F5EE;
    --warning: #A04A06;
    --warning-text: #A04A06;
    --warning-tint: #FDF3E3;
    --error: #C93C3C;
    --error-text: #B83838;
    --error-tint: #FCEAEA;
    --info: #2563EB;
    --info-text: #1D4ED8;
    --info-tint: #DBEAFE;
    --focus-ring: #8B6914;
    --btn-primary-bg: #E8C547;
    --btn-primary-fg: #0A0A0E;
    --btn-primary-hover: #F3D76A;
    --btn-secondary-bg: #FFFFFF;
    --btn-secondary-hover: #F7F6F2;
    --btn-ghost-border: rgb(10 10 14 / .16);
    --glow: rgb(232 197 71 / .10);
    --scrim: rgb(10 10 14 / .28);
    --skeleton: #ECECF1;
    --skeleton-hi: #F7F6F2;
    --hi: rgb(255 255 255 / .9);
    --sc: rgb(10 10 14 / .06);
    --sc-2: rgb(10 10 14 / .12);
    --dock: rgb(255 255 255 / .84);
  }

  @media (prefers-color-scheme: light) {
    :root:not([data-theme]) {
      --bg: #F7F6F2;
      --bg-elevated: #FBFAF6;
      --surface: #FFFFFF;
      --surface-2: #F1F0EA;
      --surface-3: #E8E6DE;
      --border: rgb(10 10 14 / .08);
      --border-strong: rgb(10 10 14 / .14);
      --text-primary: #0A0A0E;
      --text-secondary: #47474F;
      --text-muted: #5C5C64;
      --primary: #8B6914;
      --primary-hover: #A68528;
      --primary-active: #6B5010;
      --primary-tint: #F5EDD4;
      --primary-line: rgb(184 150 46 / .32);
      --primary-fg: #0A0A0E;
      --secondary: #1F9470;
      --accent: #C93C3C;
      --success: #1F9470;
      --success-text: #1A7A5C;
      --success-tint: #E4F5EE;
      --warning: #A04A06;
      --warning-text: #A04A06;
      --warning-tint: #FDF3E3;
      --error: #C93C3C;
      --error-text: #B83838;
      --error-tint: #FCEAEA;
      --info: #2563EB;
      --info-text: #1D4ED8;
      --info-tint: #DBEAFE;
      --focus-ring: #8B6914;
      --btn-primary-bg: #E8C547;
      --btn-primary-fg: #0A0A0E;
      --btn-primary-hover: #F3D76A;
      --btn-secondary-bg: #FFFFFF;
      --btn-secondary-hover: #F7F6F2;
      --btn-ghost-border: rgb(10 10 14 / .16);
      --glow: rgb(232 197 71 / .10);
      --scrim: rgb(10 10 14 / .28);
      --skeleton: #ECECF1;
      --skeleton-hi: #F7F6F2;
      --hi: rgb(255 255 255 / .9);
      --sc: rgb(10 10 14 / .06);
      --sc-2: rgb(10 10 14 / .12);
      --dock: rgb(255 255 255 / .84);
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-1: 1ms;
    --dur-2: 1ms;
    --dur-3: 1ms;
    --dur-4: 1ms;
    --dur-5: 1ms;
  }
}