/* Saabsoft ERP - design tokens (PLAN 3.2-3.5): every colour, size, radius,
   shadow, layer and duration, for both themes. No preprocessor and no build
   step (ADR-009): the files in css/ are linked one after another by the
   Blade templates, in the order of PLAN 3.8 (tokens, base, shell, components,
   datatable, forms, legacy, screens/*, print). That order IS the cascade - a
   rule that moves between files moves in it too.

   This is the only file allowed a hex colour; everything else says var().
   The token NAMES are the contract other agents code against; a value may
   change, a name may not. The contrast figures quoted below were computed
   with the WCAG 2.1 formula (notes/ui1-a-contrast.md has the full table and
   the script that produced it). */

/* Cascade layers. Utilities (.mt, .row, .sr-only ...) must beat a component
   class on the same element whatever the specificity or file order: `.note`
   sets its own margin-top, and `.note.mt` came out 3px instead of 14px
   because forms.css is linked after base.css. Layers decide before
   specificity does, and the LAST layer listed wins, so utilities sit at the
   end. The shared files (base, components, forms' field part) put their
   rules in these layers; a file that stays unlayered (shell, datatable, the
   screen families, print) still beats every layer, which is what a
   screen-specific rule wants. `legacy` holds legacy.css, the aliases that
   draw old markup in the new language: after `components`, so an alias can
   restyle old markup that also carries a component class (the old page
   head's ghost back button is a .btn), and before `utilities`, which still
   win over it (`.note.mt`). */
@layer reset, base, components, legacy, utilities;

:root {
  color-scheme: light;

  /* ── surfaces and lines ─────────────────────────────────────────────── */
  --bg:             #f5f6f8;
  --surface:        #ffffff;
  --surface-2:      #f9fafb;
  --surface-3:      #eef0f3;
  --border:         #e3e7ec;
  --border-strong:  #c9d0da;
  /* A control's edge must be seen to be used: 3:1 on bg and surface
     (WCAG 1.4.11). The old #cfd6e0 was 1.4:1 - inputs read as empty space. */
  --border-input:   #838d9c;

  /* ── text ───────────────────────────────────────────────────────────── */
  --text:           #12161d;   /* 16.8:1 on bg */
  --text-muted:     #4f5866;   /* 7.2:1 */
  --text-subtle:    #646c79;   /* 4.9:1 on bg, 5.4:1 on surface */
  --text-disabled:  #9aa2ae;   /* exempt (WCAG 1.4.3 inactive) */

  /* ── accent ─────────────────────────────────────────────────────────── */
  --accent:             #1a56c4;   /* links, focus; 6.6:1 */
  --accent-solid:       #1a56c4;   /* primary button; white on it 6.6:1 */
  --accent-solid-hover: #1648a6;
  --accent-fg:          #ffffff;
  --accent-subtle:      #e8f0fd;
  --accent-border:      #b3cbf5;

  /* ── tones (status, banners, badges) ────────────────────────────────── */
  --ok:      #16794a;  --ok-subtle:      #e6f4ec;  --ok-border:      #a7d8bd;
  --warn:    #8a5300;  --warn-subtle:    #fcf1dc;  --warn-border:    #ecc98a;
  --danger:  #b42318;  --danger-subtle:  #fdecea;  --danger-border:  #f1b5ae;
  --info:    #1a56c4;  --info-subtle:    #e8f0fd;  --info-border:    #b3cbf5;
  --neutral: #4f5866;  --neutral-subtle: #eef0f3;  --neutral-border: #d5dae1;
  --neg: var(--danger);

  /* ── rows ───────────────────────────────────────────────────────────── */
  --row-hover:    #f5f7fa;
  --row-selected: var(--accent-subtle);
  --row-flag:     #fdf1ef;

  /* ── environment badge (TEST / TRAINING / DEMO) ─────────────────────── */
  --env-test-bg:     #b54708;  --env-test-fg:     #ffffff;
  --env-training-bg: #0e7090;  --env-training-fg: #ffffff;
  --env-demo-bg:     #6941c6;  --env-demo-fg:     #ffffff;

  /* ── elevation ──────────────────────────────────────────────────────── */
  --shadow-1: 0 1px 2px rgba(16,24,40,.05);
  --shadow-2: 0 4px 12px rgba(16,24,40,.10), 0 1px 3px rgba(16,24,40,.06);
  --shadow-3: 0 18px 48px rgba(16,24,40,.22);
  --scrim:    rgba(11,16,24,.45);
  /* One focus ring everywhere, drawn only for :focus-visible. The inner ring
     is the surface colour so the accent ring stays visible on an accent
     button. */
  --focus: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent);

  /* ── charts ─────────────────────────────────────────────────────────── */
  --chart-1: #1a56c4; --chart-2: #0e9384; --chart-3: #b54708;
  --chart-4: #7a5af8; --chart-5: #c11574; --chart-6: #667085;

  /* ── type (PLAN 3.3) ────────────────────────────────────────────────── */
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --fs-xs:  11px;  --lh-xs:  16px;
  --fs-sm:  12px;  --lh-sm:  18px;
  --fs-md:  13px;  --lh-md:  20px;
  --fs-lg:  15px;  --lh-lg:  22px;
  --fs-xl:  18px;  --lh-xl:  26px;
  --fs-2xl: 22px;  --lh-2xl: 28px;
  --fs-3xl: 28px;  --lh-3xl: 34px;

  /* ── spacing (4px base, PLAN 3.4) ───────────────────────────────────── */
  --s-0: 0;      --s-half: 2px;  --s-1: 4px;  --s-1h: 6px;
  --s-2: 8px;    --s-3: 12px;    --s-4: 16px; --s-5: 20px;
  --s-6: 24px;   --s-8: 32px;    --s-10: 40px;

  /* ── density: html[data-density] = compact | (default) | comfortable ── */
  --row-h: 32px;
  --control-h: 30px;
  --cell-px: 12px;
  --fs-cell: 13px;

  /* ── widths and breakpoints (breakpoints are for reference: a custom
        property cannot be used inside @media, so the media queries repeat
        600 / 860 / 1280 literally) ─────────────────────────────────────── */
  --sidebar-w: 248px;
  --rail-w: 56px;
  --header-h: 48px;
  --measure: 72ch;
  --kv-label-w: 160px;
  --form-col-min: 220px;
  --detail-max: 1200px;
  --bp-phone: 600px;
  --bp-tablet: 860px;
  --bp-desk: 1280px;

  /* ── radii, layers, motion (PLAN 3.5) ───────────────────────────────── */
  --r-sm: 4px;  --r-md: 6px;  --r-lg: 8px;  --r-xl: 12px;  --r-pill: 999px;
  --z-sticky: 5;  --z-header: 20;  --z-sidebar: 30;  --z-dropdown: 60;
  --z-popover: 70;  --z-drawer: 90;  --z-modal: 100;  --z-toast: 200;
  --dur-fast: 120ms;
  --dur-slow: 180ms;
  --ease: cubic-bezier(.2, 0, 0, 1);

  /* ── legacy aliases (PLAN 3.2): the 86 screens and the other shared files
        still say these. They go, name by name, by Phase 6. ────────────── */
  --text-2:   var(--text-muted);
  --text-3:   var(--text-subtle);
  --accent-2: var(--accent-subtle);
  --danger-2: var(--danger-subtle);
  --ok-2:     var(--ok-subtle);
  --warn-2:   var(--warn-subtle);
  --border-2: var(--border-strong);
  --shadow:   var(--shadow-1);
  --radius:   var(--r-lg);
}

html[data-density="compact"]     { --row-h: 28px; --control-h: 26px; --cell-px: 8px;  --fs-cell: 12px; }
html[data-density="comfortable"] { --row-h: 40px; --control-h: 36px; --cell-px: 14px; --fs-cell: 13px; }

/* ── dark ───────────────────────────────────────────────────────────────
   Two selectors for one palette: the system preference when the user has
   not chosen, and the explicit choice. They must stay identical - edit both. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0d1117; --surface: #151a21; --surface-2: #1b2129; --surface-3: #222a35;
    --border: #262d38; --border-strong: #3a4452; --border-input: #66727f;
    --text: #e6edf3; --text-muted: #a9b3bf; --text-subtle: #8b96a4; --text-disabled: #5b6675;
    --accent: #5c9bff; --accent-solid: #2f6fdb; --accent-solid-hover: #2862c9; --accent-fg: #ffffff;
    --accent-subtle: #16243d; --accent-border: #2a4677;
    --ok: #4cc38a;      --ok-subtle: #0f2a1d;      --ok-border: #1f5a3c;
    --warn: #e6b450;    --warn-subtle: #2b2210;    --warn-border: #5c4516;
    --danger: #ff7b72;  --danger-subtle: #301816;  --danger-border: #6e2b26;
    --info: #79aaff;    --info-subtle: #132440;    --info-border: #2a4677;
    --neutral: #a9b3bf; --neutral-subtle: #222a35; --neutral-border: #333c49;
    --row-hover: #1a2029; --row-flag: #2a1716;
    --env-test-bg: #f79009;     --env-test-fg: #1b1300;
    --env-training-bg: #22b8d6; --env-training-fg: #06222b;
    --env-demo-bg: #7f56d9;     --env-demo-fg: #ffffff;
    --shadow-1: 0 1px 2px rgba(0,0,0,.4);
    --shadow-2: 0 6px 18px rgba(0,0,0,.45);
    --shadow-3: 0 18px 48px rgba(0,0,0,.6);
    --scrim: rgba(0,0,0,.6);
    --chart-1: #5c9bff; --chart-2: #2ed3b7; --chart-3: #f79009;
    --chart-4: #9b8afb; --chart-5: #ee46bc; --chart-6: #98a2b3;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0d1117; --surface: #151a21; --surface-2: #1b2129; --surface-3: #222a35;
  --border: #262d38; --border-strong: #3a4452; --border-input: #66727f;
  --text: #e6edf3; --text-muted: #a9b3bf; --text-subtle: #8b96a4; --text-disabled: #5b6675;
  --accent: #5c9bff; --accent-solid: #2f6fdb; --accent-solid-hover: #2862c9; --accent-fg: #ffffff;
  --accent-subtle: #16243d; --accent-border: #2a4677;
  --ok: #4cc38a;      --ok-subtle: #0f2a1d;      --ok-border: #1f5a3c;
  --warn: #e6b450;    --warn-subtle: #2b2210;    --warn-border: #5c4516;
  --danger: #ff7b72;  --danger-subtle: #301816;  --danger-border: #6e2b26;
  --info: #79aaff;    --info-subtle: #132440;    --info-border: #2a4677;
  --neutral: #a9b3bf; --neutral-subtle: #222a35; --neutral-border: #333c49;
  --row-hover: #1a2029; --row-flag: #2a1716;
  --env-test-bg: #f79009;     --env-test-fg: #1b1300;
  --env-training-bg: #22b8d6; --env-training-fg: #06222b;
  --env-demo-bg: #7f56d9;     --env-demo-fg: #ffffff;
  --shadow-1: 0 1px 2px rgba(0,0,0,.4);
  --shadow-2: 0 6px 18px rgba(0,0,0,.45);
  --shadow-3: 0 18px 48px rgba(0,0,0,.6);
  --scrim: rgba(0,0,0,.6);
  --chart-1: #5c9bff; --chart-2: #2ed3b7; --chart-3: #f79009;
  --chart-4: #9b8afb; --chart-5: #ee46bc; --chart-6: #98a2b3;
}

/* Motion off for anyone who asked for it: every duration token goes to
   zero, and the components read the tokens. */
@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur-slow: 0ms; }
}

/* ── print ────────────────────────────────────────────────────────────────
   Paper is white whatever the theme on screen: every token goes back to the
   light values, with black text, no shadows and firmer lines (a hairline
   that is fine on a screen vanishes on a laser printer). Listed last so it
   outranks both dark selectors above; print.css holds the layout rules. */
@media print {
  :root, :root[data-theme="dark"], :root:not([data-theme="light"]) {
    color-scheme: light;
    --bg: #ffffff; --surface: #ffffff; --surface-2: #f5f6f8; --surface-3: #eef0f3;
    --border: #c9d0da; --border-strong: #838d9c; --border-input: #838d9c;
    --text: #000000; --text-muted: #2f3640; --text-subtle: #4f5866; --text-disabled: #646c79;
    --accent: #000000; --accent-solid: #1a56c4; --accent-solid-hover: #1648a6; --accent-fg: #ffffff;
    --accent-subtle: #ffffff; --accent-border: #838d9c;
    --ok: #0b5534;      --ok-subtle: #ffffff;      --ok-border: #0b5534;
    --warn: #6b4000;    --warn-subtle: #ffffff;    --warn-border: #6b4000;
    --danger: #8f1c13;  --danger-subtle: #ffffff;  --danger-border: #8f1c13;
    --info: #123f91;    --info-subtle: #ffffff;    --info-border: #123f91;
    --neutral: #2f3640; --neutral-subtle: #ffffff; --neutral-border: #4f5866;
    --row-hover: #ffffff; --row-flag: #ffffff;
    --shadow-1: none; --shadow-2: none; --shadow-3: none;
  }
}