/* ==========================================================================
   adoe design system — tokens (the single source of truth)

   Shared by the marketing site (landing/assets/ds/, synced by
   scripts/sync-design-system.sh) and, from Phase 3, the dashboard
   (via tailwind-preset.cjs, which points Tailwind at these variables).

   Concept: "the incident record" — time on the left, facts on the right.
   Colour rule: cobalt means "the human's move". On the site it is only for
   primary actions and links; in the app it marks approvals and human actions.
   Status colours are for status only, never decoration, and always travel
   with an icon and a text label.

   Values follow the redesign brief §4. Deviations (all for WCAG contrast)
   are marked "adjusted" — see design-system/README.md#deviations.
   ========================================================================== */

:root {
  color-scheme: light;

  /* ---- neutrals ---- */
  --ink: #10213A;            /* primary text, headings            16.2:1 on paper */
  --slate: #4A5A70;          /* secondary text                     7.0:1 */
  --slate-2: #647286;        /* tertiary text, captions            4.9:1 (adjusted from #6B7A8F) */
  --rule: #DCE3EC;           /* dividers, timeline rail (decorative only) */
  --rule-strong: #838FA0;    /* control borders: inputs, selects   3.3:1 (added) */
  --paper: #FFFFFF;          /* page background */
  --mist: #F4F7FA;           /* subtle surfaces, table header, code blocks */

  /* ---- brand: the human's move ---- */
  --cobalt: #2442B8;         /* primary buttons, links, approval actions  8.3:1 */
  --cobalt-hover: #1B3594;
  --cobalt-tint: #EAEEFB;    /* selected rows, approval panels */
  --on-cobalt: #FFFFFF;      /* text on cobalt */
  --focus: #2442B8;          /* 2px focus ring, 2px offset */

  /* ---- status (app + timeline only) ---- */
  --ok: #1A7F4B;             /* resolved, verified, healthy        5.0:1 */
  --ok-tint: #EDF5F1;
  --warn: #AE5C09;           /* investigating, degraded            4.8:1 (adjusted from #B25E09) */
  --warn-tint: #FBF6F1;
  --crit: #C0362C;           /* critical, escalated, failed        5.5:1 */
  --crit-tint: #F7E7E6;
  --approve: var(--cobalt);  /* waiting for human approval */
  --approve-tint: var(--cobalt-tint);
  --info: #4A5A70;           /* informational, suppressed */
  --info-tint: var(--mist);

  /* ---- charts: one categorical palette, max 6, derived from tokens ----
     Status charts use the status tokens above, never these. */
  --cat-1: #2442B8;          /* cobalt */
  --cat-2: #7D95F2;          /* cobalt, light */
  --cat-3: #10213A;          /* ink */
  --cat-4: #1E6C86;          /* cobalt × ok */
  --cat-5: #838FA0;          /* rule-strong */
  --cat-6: #A9B6F5;          /* cobalt, lighter */

  /* ---- typography ---- */
  --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;

  /* size / line-height pairs, desktop (mobile overrides below) */
  --fs-display: 3.25rem;  --lh-display: 3.75rem;   /* 52/60 */
  --fs-h1: 2.5rem;        --lh-h1: 3rem;           /* 40/48 */
  --fs-h2: 1.875rem;      --lh-h2: 2.375rem;       /* 30/38 */
  --fs-h3: 1.25rem;       --lh-h3: 1.75rem;        /* 20/28 */
  --fs-body-lg: 1.125rem; --lh-body-lg: 1.875rem;  /* 18/30 */
  --fs-body: 1rem;        --lh-body: 1.625rem;     /* 16/26 */
  --fs-small: 0.875rem;   --lh-small: 1.25rem;     /* 14/20 */
  --fs-caption: 0.8125rem;--lh-caption: 1.125rem;  /* 13/18 */
  --fs-mono: 0.875rem;    --lh-mono: 1.25rem;      /* 14/20 */
  --fs-mono-table: 0.8125rem; --lh-mono-table: 1.25rem; /* 13/20 */
  --tracking-display: -0.01em;
  --measure: 68ch;           /* max body line length */

  /* ---- space (4 8 12 16 24 32 48 64 96 128) ---- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;  --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;  --s-10: 128px;

  /* ---- layout ---- */
  --container: 1200px;
  --gutter: 24px;
  --section-pad: 96px;
  --header-h: 64px;

  /* ---- shape: radius by hierarchy ---- */
  --r-sm: 4px;               /* badges, inputs */
  --r-md: 6px;               /* buttons */
  --r-lg: 8px;               /* panels */
  --r-xl: 12px;              /* the hero timeline card only */

  /* ---- elevation: floating layers only (menus, popovers, modals) ---- */
  --shadow-float: 0 8px 24px rgba(16, 33, 58, 0.12);
  --backdrop: rgba(16, 33, 58, 0.48);

  /* ---- motion: responds to user action only ---- */
  --dur-fast: 150ms;
  --dur: 200ms;
  --ease-out: cubic-bezier(0.2, 0, 0, 1);

  /* ---- sizes ---- */
  --icon: 20px;
  --row-comfortable: 48px;
  --row-compact: 36px;
  --control-h: 40px;
  --control-h-sm: 32px;
}

@media (max-width: 720px) {
  :root {
    --fs-display: 2.25rem;  --lh-display: 2.75rem;  /* 36/44 */
    --fs-h1: 1.875rem;      --lh-h1: 2.375rem;      /* 30/38 */
    --fs-h2: 1.5rem;        --lh-h2: 2rem;          /* 24/32 */
    --fs-h3: 1.125rem;      --lh-h3: 1.625rem;      /* 18/26 */
    --fs-body-lg: 1.0625rem;--lh-body-lg: 1.75rem;  /* 17/28 */
    --section-pad: 64px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur: 0ms; }
}

/* ---- dark theme: app only, for night on-call. The marketing site never
   sets data-theme, so it always stays light. The app sets
   data-theme="auto" (follow the OS) or "light" / "dark" (user choice). ---- */
:root[data-theme="dark"],
[data-theme="dark"] {
  color-scheme: dark;
  --ink: #E6EBF2;
  --slate: #A3AFBF;
  --slate-2: #7D8A9C;
  --rule: #243042;
  --rule-strong: #606C7D;
  --paper: #0E1624;
  --mist: #152033;
  --cobalt: #7D95F2;
  --cobalt-hover: #9AAEF6;
  --cobalt-tint: #1C2A4D;
  --on-cobalt: #0E1624;
  --focus: #7D95F2;
  --ok: #539F78;   --ok-tint: #192C31;
  --warn: #C2803D; --warn-tint: #2B2728;
  --crit: #D4746D; --crit-tint: #2E2530;
  --info: #A3AFBF; --info-tint: var(--mist);
  --cat-1: #7D95F2; --cat-2: #A9B6F5; --cat-3: #E6EBF2; --cat-4: #4FA3B8; --cat-5: #7D8A9C; --cat-6: #3F5BD0;
  --shadow-float: 0 8px 24px rgba(0, 0, 0, 0.48);
  --backdrop: rgba(0, 0, 0, 0.6);
}

@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    color-scheme: dark;
    --ink: #E6EBF2;
    --slate: #A3AFBF;
    --slate-2: #7D8A9C;
    --rule: #243042;
    --rule-strong: #606C7D;
    --paper: #0E1624;
    --mist: #152033;
    --cobalt: #7D95F2;
    --cobalt-hover: #9AAEF6;
    --cobalt-tint: #1C2A4D;
    --on-cobalt: #0E1624;
    --focus: #7D95F2;
    --ok: #539F78;   --ok-tint: #192C31;
    --warn: #C2803D; --warn-tint: #2B2728;
    --crit: #D4746D; --crit-tint: #2E2530;
    --info: #A3AFBF; --info-tint: var(--mist);
    --cat-1: #7D95F2; --cat-2: #A9B6F5; --cat-3: #E6EBF2; --cat-4: #4FA3B8; --cat-5: #7D8A9C; --cat-6: #3F5BD0;
    --shadow-float: 0 8px 24px rgba(0, 0, 0, 0.48);
    --backdrop: rgba(0, 0, 0, 0.6);
  }
}