/* =============================================================
   Autopilot — design foundation
   The single source for colour, type, spacing, radius, motion and
   layout constants. Every screen reads from here; no stylesheet
   below this one is allowed to introduce a raw value.
   ============================================================= */

/* ---------- Palette (raw, never used directly in components) ---------- */

:root {
  /* Neutrals are warm-grey, not blue-grey: blue-tinted greys next to a blue
     accent make every surface read as "dashboard template". */
  --grey-0:   #ffffff;
  --grey-25:  #fbfbfc;
  --grey-50:  #f6f7f8;
  --grey-100: #eceef1;
  --grey-200: #dfe2e6;
  --grey-300: #c7ccd3;
  --grey-400: #9aa1ab;
  --grey-500: #6b7280;
  --grey-600: #4d5560;
  --grey-700: #363c45;
  --grey-800: #23272e;
  --grey-900: #16191d;
  --grey-950: #0e1013;

  --blue-400: #7aa2f7;
  --blue-500: #4f7bef;
  --blue-600: #3d63dd;
  --blue-700: #2f4fbe;

  --green-400: #4ade80;
  --green-600: #16794a;
  --amber-400: #fbbf24;
  --amber-600: #a15c07;
  --red-400:   #f87171;
  --red-600:   #b42318;
}

/* ---------- Semantic surface + text: light ---------- */

:root {
  color-scheme: light;

  /* Two background planes only. The app chrome sits on --bg-sunken,
     content sits on --bg-surface. More planes than this and nothing reads
     as "primary". */
  --bg-sunken:    var(--grey-50);
  --bg-surface:   var(--grey-0);
  --bg-raised:    var(--grey-0);
  --bg-subtle:    var(--grey-25);
  --bg-hover:     rgba(22, 25, 29, 0.04);
  --bg-active:    rgba(22, 25, 29, 0.07);
  --bg-selected:  rgba(61, 99, 221, 0.08);

  --text-primary:   var(--grey-900);
  --text-secondary: var(--grey-600);
  /* Not --grey-500: that lands at 4.51:1 on --bg-sunken, which passes AA with
     no margin at the 12px sizes this token is used at. */
  --text-tertiary:  #616873;
  --text-disabled:  var(--grey-400);
  --text-inverse:   var(--grey-0);
  --text-accent:    var(--blue-700);

  --border-subtle: var(--grey-100);
  --border-default: var(--grey-200);
  --border-strong: var(--grey-300);
  --border-accent: var(--blue-600);
  /* WCAG 1.4.11 requires 3:1 for the boundary of a control the user must be
     able to identify. --border-default is 1.3:1 against the surface, which is
     right for decorative separators and wrong for an input outline. Anything
     the user operates uses this token instead; measured 3.17:1. */
  --border-interactive: #8a919d;


  --accent:        var(--blue-600);
  --accent-hover:  var(--blue-700);
  --accent-text:   #ffffff;
  --accent-subtle: rgba(61, 99, 221, 0.10);

  --success:        var(--green-600);
  --success-subtle: rgba(22, 121, 74, 0.10);
  --warning:        var(--amber-600);
  --warning-subtle: rgba(161, 92, 7, 0.12);
  --danger:         var(--red-600);
  --danger-subtle:  rgba(180, 35, 24, 0.10);
  --danger-hover:   #93140b;

  /* Shadows stay near-invisible. Enterprise density comes from borders and
     spacing; drop shadows on every card is the tell of a template. */
  --shadow-sm: 0 1px 2px rgba(16, 19, 24, 0.06);
  --shadow-md: 0 2px 4px rgba(16, 19, 24, 0.06), 0 4px 12px rgba(16, 19, 24, 0.06);
  --shadow-lg: 0 8px 28px rgba(16, 19, 24, 0.12);
  --shadow-none: none;
}

/* ---------- Semantic surface + text: dark ---------- */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --bg-sunken:    var(--grey-950);
    --bg-surface:   var(--grey-900);
    --bg-raised:    var(--grey-800);
    --bg-subtle:    #1a1d22;
    --bg-hover:     rgba(255, 255, 255, 0.05);
    --bg-active:    rgba(255, 255, 255, 0.09);
    --bg-selected:  rgba(122, 162, 247, 0.14);

    --text-primary:   #eef1f5;
    --text-secondary: #a7afba;
    --text-tertiary:  #7f8794;
    --text-disabled:  #5b626d;
    --text-inverse:   var(--grey-950);
    --text-accent:    var(--blue-400);

    --border-subtle:  rgba(255, 255, 255, 0.06);
    --border-default: rgba(255, 255, 255, 0.11);
    --border-strong:  rgba(255, 255, 255, 0.18);
    --border-accent:  var(--blue-500);
    --border-interactive: #646c78; /* 3.32:1 on --bg-surface */

    --accent:        var(--blue-500);
    --accent-hover:  var(--blue-400);
    --accent-text:   #0b0d10;
    --accent-subtle: rgba(122, 162, 247, 0.14);

    --success:        var(--green-400);
    --success-subtle: rgba(74, 222, 128, 0.14);
    --warning:        var(--amber-400);
    --warning-subtle: rgba(251, 191, 36, 0.14);
    --danger:         var(--red-400);
    --danger-subtle:  rgba(248, 113, 113, 0.14);
    --danger-hover:   #fca5a5;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.3), 0 4px 12px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 8px 28px rgba(0, 0, 0, 0.5);
  }
}

/* Explicit theme choice always wins over the OS signal, in both directions. */
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg-sunken:    var(--grey-950);
  --bg-surface:   var(--grey-900);
  --bg-raised:    var(--grey-800);
  --bg-subtle:    #1a1d22;
  --bg-hover:     rgba(255, 255, 255, 0.05);
  --bg-active:    rgba(255, 255, 255, 0.09);
  --bg-selected:  rgba(122, 162, 247, 0.14);

  --text-primary:   #eef1f5;
  --text-secondary: #a7afba;
  --text-tertiary:  #7f8794;
  --text-disabled:  #5b626d;
  --text-inverse:   var(--grey-950);
  --text-accent:    var(--blue-400);

  --border-subtle:  rgba(255, 255, 255, 0.06);
  --border-default: rgba(255, 255, 255, 0.11);
  --border-strong:  rgba(255, 255, 255, 0.18);
  --border-accent:  var(--blue-500);
  --border-interactive: #646c78; /* 3.32:1 on --bg-surface */

  --accent:        var(--blue-500);
  --accent-hover:  var(--blue-400);
  --accent-text:   #0b0d10;
  --accent-subtle: rgba(122, 162, 247, 0.14);

  --success:        var(--green-400);
  --success-subtle: rgba(74, 222, 128, 0.14);
  --warning:        var(--amber-400);
  --warning-subtle: rgba(251, 191, 36, 0.14);
  --danger:         var(--red-400);
  --danger-subtle:  rgba(248, 113, 113, 0.14);
  --danger-hover:   #fca5a5;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.3), 0 4px 12px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 8px 28px rgba(0, 0, 0, 0.5);
}

/* ---------- Typography ---------- */

:root {
  --font-sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI",
               Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  /* Monospace carries JQL, cron, JSON rules, tokens and chat IDs — all of
     which are read character-by-character and must not use ligatures. */
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
               "Liberation Mono", monospace;

  /* Scale is 4-step, not continuous: 12 / 13 / 14 / 16 / 20 / 24 / 30.
     The old CSS mixed 13/14/15/16 with no rule, which is why nothing
     reads as a clear level. */
  --text-2xs: 0.6875rem;  /* 11px — uppercase eyebrow labels only */
  --text-xs:  0.75rem;    /* 12px — metadata, table captions */
  --text-sm:  0.8125rem;  /* 13px — secondary body, help text */
  --text-md:  0.875rem;   /* 14px — default UI text, inputs, buttons */
  --text-base:1rem;       /* 16px — emphasised body */
  --text-lg:  1.25rem;    /* 20px — section headings */
  --text-xl:  1.5rem;     /* 24px — page titles */
  --text-2xl: 1.875rem;   /* 30px — marketing-scale, sign-in only */

  --leading-tight: 1.25;
  --leading-snug:  1.4;
  --leading-normal:1.55;

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  /* Optical tightening: large text needs negative tracking, small
     uppercase needs positive. */
  --tracking-tight: -0.011em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
}

/* ---------- Spacing (4px base) ---------- */

:root {
  --space-1: 0.25rem;   /* 4  */
  --space-2: 0.5rem;    /* 8  */
  --space-3: 0.75rem;   /* 12 */
  --space-4: 1rem;      /* 16 */
  --space-5: 1.25rem;   /* 20 */
  --space-6: 1.5rem;    /* 24 */
  --space-8: 2rem;      /* 32 */
  --space-10: 2.5rem;   /* 40 */
  --space-12: 3rem;     /* 48 */
  --space-16: 4rem;     /* 64 */
}

/* ---------- Radius ---------- */

:root {
  /* The old 18px card radius is the single strongest "consumer app" signal
     in the current UI. Enterprise surfaces sit at 6–10px. */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 10px;
  --radius-full: 9999px;
}

/* ---------- Motion ---------- */

:root {
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 90ms;
  --duration-base: 150ms;
  --duration-slow: 240ms;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 1ms;
    --duration-base: 1ms;
    --duration-slow: 1ms;
  }
}

/* ---------- Focus ---------- */

:root {
  /* The current app defines zero focus styles, so keyboard operation is
     invisible. One ring, used everywhere, offset so it never sits on top
     of the control's own border. */
  --focus-ring: 0 0 0 2px var(--bg-surface), 0 0 0 4px var(--accent);
  --focus-ring-offset: 2px;
}

/* ---------- Layout constants ---------- */

:root {
  --sidebar-width: 232px;
  --sidebar-width-collapsed: 56px;
  --topbar-height: 48px;
  --content-max: 1080px;   /* reading/forms */
  --content-max-wide: 1440px; /* tables, audit log */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-toast: 500;
}