/* ==========================================================================
   Architect 2.0 — design tokens
   Lifecycle colour system (used everywhere, never decoratively):
     blueprint = planned / brand · amber = building · green = verified / live
     red = problem · violet = AI / agents · grey = deferred / sample
   ========================================================================== */
:root {
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-display: "Instrument Serif", Georgia, "Times New Roman", serif;

  /* Neutrals — warm paper */
  --bg: #F6F6F3;
  --bg-sunken: #EEEDE8;
  --surface: #FFFFFF;
  --surface-2: #FAFAF8;
  --surface-hover: #F3F2EE;
  --surface-active: #ECEBE6;
  --border: #E6E4DD;
  --border-strong: #D4D1C8;
  --text: #15171C;
  --text-2: #464A53;
  --text-3: #767A83;
  --text-4: #A3A6AD;
  --text-inverse: #FFFFFF;
  --overlay: rgba(18, 18, 14, 0.42);

  /* Brand & lifecycle */
  --blueprint: #2F5BEA;
  --blueprint-hover: #264DD1;
  --blueprint-ink: #1C3AA8;
  --blueprint-soft: #ECF1FF;
  --blueprint-line: #BFCFFF;
  --amber: #D9830B;
  --amber-ink: #8A5200;
  --amber-soft: #FFF3DC;
  --amber-line: #F6D494;
  --green: #139B4F;
  --green-ink: #0B6B35;
  --green-soft: #E3F6EA;
  --green-line: #A9DEBE;
  --red: #D93A2B;
  --red-ink: #A0241A;
  --red-soft: #FDEBE8;
  --red-line: #F4B9B1;
  --violet: #7446F0;
  --violet-ink: #5230B8;
  --violet-soft: #F1ECFE;
  --violet-line: #D3C4FB;
  --grey-soft: #EFEEEA;
  --grey-ink: #5E6168;

  --primary: var(--blueprint);
  --primary-hover: var(--blueprint-hover);
  --primary-text: #FFFFFF;
  --ink-btn: #15171C;
  --ink-btn-hover: #2B2E36;
  --ink-btn-text: #FFFFFF;

  --focus-ring: 0 0 0 3px rgba(47, 91, 234, 0.28);
  --grid-line: rgba(47, 91, 234, 0.07);

  /* Shape */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-full: 999px;

  /* Elevation */
  --shadow-xs: 0 1px 2px rgba(22, 20, 12, 0.06);
  --shadow-sm: 0 1px 3px rgba(22, 20, 12, 0.08), 0 1px 2px rgba(22, 20, 12, 0.04);
  --shadow-md: 0 8px 24px -6px rgba(22, 20, 12, 0.14), 0 2px 6px rgba(22, 20, 12, 0.05);
  --shadow-lg: 0 28px 70px -14px rgba(22, 20, 12, 0.28), 0 6px 18px rgba(22, 20, 12, 0.08);

  /* Motion */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --dur-fast: 120ms;
  --dur: 180ms;
  --dur-slow: 320ms;

  /* Layout */
  --rail-w: 236px;
  --rail-w-collapsed: 64px;
  --topbar-h: 52px;
  --dock-w: 392px;
  --runbar-h: 38px;
  --content-max: 1200px;

  /* Type scale */
  --fs-xs: 11.5px;
  --fs-sm: 12.5px;
  --fs-md: 13.5px;
  --fs-base: 14.5px;
  --fs-lg: 16px;
  --fs-xl: 19px;
  --fs-2xl: 24px;
  --fs-3xl: 32px;
  --fs-4xl: 44px;
  --fs-5xl: 60px;

  color-scheme: light;
}

/* Dark theme — explicit */
:root[data-theme="dark"] {
  --bg: #0E1014;
  --bg-sunken: #0A0B0E;
  --surface: #15181E;
  --surface-2: #181B22;
  --surface-hover: #1E222A;
  --surface-active: #252A33;
  --border: #262A33;
  --border-strong: #353A45;
  --text: #ECEDEF;
  --text-2: #B6B9C0;
  --text-3: #858993;
  --text-4: #5C6069;
  --text-inverse: #0E1014;
  --overlay: rgba(0, 0, 0, 0.6);

  --blueprint: #5B80FF;
  --blueprint-hover: #7394FF;
  --blueprint-ink: #A9BDFF;
  --blueprint-soft: rgba(91, 128, 255, 0.14);
  --blueprint-line: rgba(91, 128, 255, 0.4);
  --amber: #F2A93B;
  --amber-ink: #F7C77A;
  --amber-soft: rgba(242, 169, 59, 0.14);
  --amber-line: rgba(242, 169, 59, 0.4);
  --green: #34C774;
  --green-ink: #7EE0A8;
  --green-soft: rgba(52, 199, 116, 0.14);
  --green-line: rgba(52, 199, 116, 0.4);
  --red: #F2604F;
  --red-ink: #FF9A8C;
  --red-soft: rgba(242, 96, 79, 0.14);
  --red-line: rgba(242, 96, 79, 0.4);
  --violet: #9B7BFF;
  --violet-ink: #C7B5FF;
  --violet-soft: rgba(155, 123, 255, 0.15);
  --violet-line: rgba(155, 123, 255, 0.4);
  --grey-soft: #1F232B;
  --grey-ink: #A4A8B0;

  --primary-text: #FFFFFF;
  --ink-btn: #ECEDEF;
  --ink-btn-hover: #FFFFFF;
  --ink-btn-text: #0E1014;
  --focus-ring: 0 0 0 3px rgba(91, 128, 255, 0.35);
  --grid-line: rgba(91, 128, 255, 0.07);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 10px 28px -8px rgba(0, 0, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 30px 80px -16px rgba(0, 0, 0, 0.75), 0 6px 18px rgba(0, 0, 0, 0.45);
  color-scheme: dark;
}

/* Dark theme — follow the OS unless the user chose light */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0E1014;
    --bg-sunken: #0A0B0E;
    --surface: #15181E;
    --surface-2: #181B22;
    --surface-hover: #1E222A;
    --surface-active: #252A33;
    --border: #262A33;
    --border-strong: #353A45;
    --text: #ECEDEF;
    --text-2: #B6B9C0;
    --text-3: #858993;
    --text-4: #5C6069;
    --text-inverse: #0E1014;
    --overlay: rgba(0, 0, 0, 0.6);

    --blueprint: #5B80FF;
    --blueprint-hover: #7394FF;
    --blueprint-ink: #A9BDFF;
    --blueprint-soft: rgba(91, 128, 255, 0.14);
    --blueprint-line: rgba(91, 128, 255, 0.4);
    --amber: #F2A93B;
    --amber-ink: #F7C77A;
    --amber-soft: rgba(242, 169, 59, 0.14);
    --amber-line: rgba(242, 169, 59, 0.4);
    --green: #34C774;
    --green-ink: #7EE0A8;
    --green-soft: rgba(52, 199, 116, 0.14);
    --green-line: rgba(52, 199, 116, 0.4);
    --red: #F2604F;
    --red-ink: #FF9A8C;
    --red-soft: rgba(242, 96, 79, 0.14);
    --red-line: rgba(242, 96, 79, 0.4);
    --violet: #9B7BFF;
    --violet-ink: #C7B5FF;
    --violet-soft: rgba(155, 123, 255, 0.15);
    --violet-line: rgba(155, 123, 255, 0.4);
    --grey-soft: #1F232B;
    --grey-ink: #A4A8B0;

    --primary-text: #FFFFFF;
    --ink-btn: #ECEDEF;
    --ink-btn-hover: #FFFFFF;
    --ink-btn-text: #0E1014;
    --focus-ring: 0 0 0 3px rgba(91, 128, 255, 0.35);
    --grid-line: rgba(91, 128, 255, 0.07);

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 10px 28px -8px rgba(0, 0, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 30px 80px -16px rgba(0, 0, 0, 0.75), 0 6px 18px rgba(0, 0, 0, 0.45);
    color-scheme: dark;
  }
}