/* Atlas design tokens — the single source of truth.
 *
 * ALCEDO rebrand: token NAMES are unchanged (they are internal identifiers
 * referenced across every stylesheet); only their VALUES carry the ALCEDO kit
 * (apps/web/assets/brand/alcedo/brand-tokens.json, README.txt). Teal #08495C is
 * the workhorse interactive/structure colour (primary fills, active nav, focus,
 * links, icons, charts); orange #E8732A is a sparing non-text highlight only
 * (--highlight); warm ivory #F8F5ED and ink #10201F are the surface/ink anchors.
 *
 * Canonical reference: docs/design/Atlas_Design_System.md (S88 redesign,
 * spec docs/design/Atlas_Experience_Redesign.md §5). New CSS uses the short
 * names (--bg, --text-2, --accent, --r-md, --s-4, --type-body, --dur-2 …).
 * The older names further down are aliases of the new values, kept for module
 * code that still reads them; new CSS never uses them.
 *
 * Do not define :root custom properties anywhere else;
 * css-hygiene-s88.test.js fails if another stylesheet redefines one of these.
 *
 * Linked FIRST in index.html because it also declares the cascade-layer order
 * for every Atlas stylesheet. Between layers, the later layer wins for normal
 * declarations whatever the specificity or load order; for !important the
 * order reverses (the earlier layer wins).
 *
 *   atlas.tokens      custom properties only (this file)
 *   atlas.base        reset, typography, focus, reduced motion, role gating,
 *                     layout primitives (atlas-base.css)
 *   atlas.components  component classes (atlas-components.css) and the shell
 *                     (atlas-shell.css)
 *   atlas.modules     one stylesheet per module: layout and module-specific
 *                     pieces only, never !important
 *
 * S88 retired the atlas.legacy layer (the pre-S88 page CSS, the inline
 * index.html style block and the legacy/ fragments of the old override files);
 * nothing may reintroduce it (css-hygiene-s88.test.js).
 */
@layer atlas.tokens, atlas.base, atlas.components, atlas.modules;

@layer atlas.tokens {
:root {
  /* ---------- ALCEDO brand palette (apps/web/assets/brand/alcedo/) ----------
     The kit anchors: deep teal, orange, warm ivory, sage, ink (brand-tokens.json).
     Everything below derives from them. The logo art is teal (color on light,
     white on dark); teal is the product-interface accent, orange a sparing
     non-text highlight. Names are kept from the Atlas system (internal ids). */
  --atlas-midnight: #10201F;   /* ink */
  --atlas-slate: #1F2937;      /* neutral dark surface (toasts, tooltips) */
  --atlas-mist: #CBD5E1;       /* light neutral border */
  --atlas-snow: #F8F5ED;       /* warm ivory */
  --atlas-blue: #08495C;       /* deep teal — the interface accent */

  /* ---------- Colour: surfaces ---------- */
  --bg: var(--atlas-snow);       /* content canvas — warm ivory #F8F5ED (no white in the app chrome) */
  --bg-subtle: var(--atlas-snow);   /* warm ivory: sidebar, topbar, table header, inset panels */
  --bg-muted: #E8E1D2;           /* hover on subtle, segmented track, skeleton (deeper warm cream) */
  --bg-hover: #EFE9DB;           /* table row hover (warm cream, off the ivory canvas) */
  --surface: #F3EFE3;            /* cards, sheets, popovers, inputs — warm cream, NEVER white; set off the ivory canvas by a hairline + soft teal shadow */
  --overlay: rgba(16, 32, 31, .32);  /* ink */

  /* ---------- Colour: text (all ≥ 4.5:1 on --bg, --bg-subtle and --bg-muted) ---------- */
  --text: var(--atlas-midnight); /* headings and primary text, 19.2:1 on white */
  --text-2: #2E3D3A;             /* secondary — warm ink family (ALCEDO), ≥ 9:1 on light surfaces */
  --text-3: #4E5E58;             /* placeholders, group labels, meta — warm ink family, ≥ 5.5:1 on light surfaces */
  --text-on-accent: var(--atlas-snow);  /* ivory text on teal/dark fills (no stark white); ~9.3:1 on teal */
  --ink: var(--atlas-slate);     /* dark surfaces: tooltips, toasts, bulk bar (white text 14.7:1) */

  /* ---------- Colour: lines (Mist) ---------- */
  --line: rgba(16, 32, 31, .14); /* card borders, dividers — warm ink hairline (ALCEDO) */
  --line-strong: var(--atlas-mist); /* inputs, secondary buttons */
  --line-hover: rgba(16, 32, 31, .34); /* input hover */
  --line-subtle: rgba(16, 32, 31, .08); /* row dividers inside cards and tables */
  --control-border: rgba(16, 32, 31, .40); /* checkbox / radio outline */
  --toggle-off: var(--atlas-mist);

  /* ---------- Colour: accent ----------
     ALCEDO deep teal #08495C is the brand/interface accent: focus ring,
     selection and active-nav indicators, icons, badges, charts, AND — because
     teal is dark — text-bearing fills too. White text on teal is ~9.9:1 (passes
     WCAG AA), so unlike Atlas Blue the one teal serves both the indicator role
     and the primary-button/link role. Orange (--highlight) is the sparing
     non-text pop, never a fill behind white body text. */
  --accent-brand: var(--atlas-blue); /* indicators, focus, icons, charts */
  --accent: var(--atlas-blue);   /* primary fills with white text (~9.9:1), accent text/links */
  --accent-hover: #063a49;       /* darker teal for hover */
  --accent-press: #052e3a;       /* darker teal for press */
  --accent-soft: #eef4f5;        /* selected rows, active chip, info tiles (pale teal wash) */
  --accent-soft-hover: #dde9ec;
  --accent-text: var(--accent);  /* link / label text: ~9.9:1 on white, ~9:1 on --accent-soft */
  --accent-ring: rgba(8, 73, 92, .22);
  --accent-illustration: var(--atlas-blue); /* charts and illustration */

  /* ---------- Colour: highlight (orange, sparing, never behind small text) ----
     Orange #E8732A fails AA for text on white, so it is used only as a non-text
     pop: the active-nav indicator bar/dot, a selected-chip edge, unread /
     notification dots and small emphasis, or paired with ink text. */
  --highlight: #E8732A;
  --highlight-soft: #fdece1;
  --highlight-ring: rgba(232, 115, 42, .28);

  /* ---------- Colour: status (always paired with a word or icon) ---------- */
  --positive: #047857;           /* 5.5:1 on white, 5.2:1 on --positive-soft */
  --positive-soft: #ecfdf5;
  --warning: #b45309;            /* text: 5.0:1 on white, 4.8:1 on --warning-soft */
  --warning-icon: #c26a04;       /* icons only, deep amber — >= 3:1 non-text on the ivory canvas, kept clearly distinct from brand orange #E8732A */
  --warning-soft: #fffbeb;
  --danger: #c42020;             /* 5.9:1 on white (text and white-on-fill), 5.4:1 on --danger-soft */
  --danger-soft: #fef2f2;
  --danger-ring: rgba(196, 32, 32, .12);
  --neutral-soft: #f1f5f9;

  /* ---------- Typography ---------- */
  /* ALCEDO type system (self-hosted OFL webfonts, see @font-face at foot of file):
     display/headings = Instrument Serif; body/UI = Manrope; labels/eyebrows/meta/
     numeric = JetBrains Mono (used selectively). */
  --font-sans: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Role shorthands: font: var(--type-body); letter-spacing where given.
     Instrument Serif ships a single 400 weight, so display headings are 400. */
  --type-display: 400 34px/40px var(--font-display);  --track-display: -0.01em;
  --type-title:   600 24px/32px var(--font-sans);     --track-title: -0.015em;
  --type-section: 600 17px/24px var(--font-sans);     --track-section: -0.005em;
  --type-heading: 600 15px/22px var(--font-sans);
  --type-body:    400 14px/20px var(--font-sans);
  --type-body-lg: 400 15px/24px var(--font-sans);
  --type-label:   500 13px/18px var(--font-sans);
  --type-meta:    400 13px/18px var(--font-sans);
  --type-caption: 400 12px/16px var(--font-sans);     /* the minimum size */
  --type-kpi:     500 28px/32px var(--font-sans);     --track-kpi: -0.02em;
  --type-num:     500 14px/20px var(--font-sans);

  /* Sizes for rules that set font-size only. */
  --fs-display: 32px;
  --fs-title: 24px;
  --fs-section: 17px;
  --fs-heading: 15px;
  --fs-body: 14px;
  --fs-body-lg: 15px;
  --fs-label: 13px;
  --fs-caption: 12px;
  --fs-kpi: 28px;

  /* ---------- Spacing (4 px base) ---------- */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px;
  --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-20: 80px;

  /* ---------- Radius ---------- */
  --r-xs: 4px;     /* checkbox, kbd, skeleton */
  --r-sm: 6px;     /* segmented inner, small tags, tooltip */
  --r-md: 12px;    /* inputs, nav items, record chips (ALCEDO softer radius; buttons are pill) */
  --r-lg: 16px;    /* cards, tables, alerts, popovers, toasts */
  --r-xl: 20px;    /* dialogs, sheets, palette, composer */
  --r-pill: 999px; /* pills, chips, avatars, toggles, buttons */

  /* ---------- Elevation (near flat; cards at rest have none) ---------- */
  --shadow-none: 0 0 0 0 transparent;
  --shadow-1: 0 1px 2px rgba(8, 73, 92, .08);            /* soft, teal-tinted (ALCEDO) */
  --shadow-soft: 0 18px 40px -32px rgba(8, 73, 92, .26), 0 4px 10px -8px rgba(8, 73, 92, .10);
  --shadow-pop: 0 18px 40px -32px rgba(8, 73, 92, .28), 0 4px 10px -8px rgba(8, 73, 92, .12);
  --shadow-modal: 0 24px 48px -32px rgba(8, 73, 92, .42), 0 6px 14px -10px rgba(8, 73, 92, .16);

  /* ---------- Focus ---------- */
  --focus-width: 2px;
  --focus-offset: 3px;
  --focus-color: var(--accent-brand);   /* teal: ≥ 3:1 on white, ivory, --bg-muted (light surfaces); dark --ink surfaces use a light ring */
  --focus-outline: var(--focus-width) solid var(--focus-color);
  --focus-ring: 0 0 0 3px var(--accent-ring);   /* inputs: border + ring */

  /* ---------- Controls and icons ---------- */
  --control-sm: 32px;
  --control-md: 36px;
  --control-lg: 44px;
  --touch: 44px;
  --icon-sm: 16px;     /* inline, buttons, rows */
  --icon-md: 18px;     /* top bar, header icon buttons */
  --icon-lg: 20px;     /* sheet close, phone top bar */
  --icon-xl: 22px;     /* phone tab bar */
  --icon-stroke: 1.75;
  --icon-stroke-xl: 1.6;
  --icon-stroke-strong: 2;

  /* ---------- Shell geometry ---------- */
  --sidebar-rail: 64px;
  --topbar-h: 56px;
  --tabbar-h: 56px;
  --page-max: 1200px;
  --page-gutter: 40px;
  --reading-max: 720px;

  /* ---------- Motion ---------- */
  --dur-1: 120ms;   /* hover, press, colour */
  --dur-2: 180ms;   /* menus, popovers, toggles, tabs, row expand */
  --dur-3: 240ms;   /* sheets, dialogs, palette */
  --ease-out: cubic-bezier(.2, .7, .1, 1);
  --ease-in-out: cubic-bezier(.4, 0, .2, 1);

  /* Shared motion system (animation pass). Durations and easing are
     theme-independent, so they are defined once here (never mirrored in a
     theme block). Controls animate at --motion-fast/--motion-mid (~120–250ms),
     larger transitions at --motion-mid/--motion-slow (~200–350ms). Prefer
     opacity + transform only. The movement tokens below collapse to 0 under
     prefers-reduced-motion (media block at the foot of :root). */
  --motion-fast: 140ms;
  --motion-mid: 200ms;
  --motion-slow: 300ms;
  --ease-standard: cubic-bezier(.4, 0, .2, 1);
  --ease-in: cubic-bezier(.4, 0, 1, 1);
  --move-sm: 4px;
  --move-md: 8px;

  /* ---------- Layers ---------- */
  --z-sticky: 20;
  --z-overlay: 60;
  --z-toast: 1600;

  /* ================================================================
     Legacy names. Each resolves to a value above (spec §5.2 table), so
     the pre-S88 pages shift with the system. Do not use them in new CSS.
     ================================================================ */

  /* Surfaces and text */
  --atlas-bg: var(--bg);
  --atlas-surface: var(--surface);
  --atlas-surface-solid: var(--surface);
  --atlas-surface-sunken: var(--bg-subtle);
  --atlas-sidebar: var(--bg-subtle);
  --atlas-text: var(--text);
  --atlas-muted: var(--text-2);
  --atlas-subtle: var(--text-3);
  --atlas-line: var(--line);
  --atlas-line-strong: var(--line-strong);

  /* Accent: every module "primary blue" alias resolves to the one ALCEDO teal */
  --atlas-accent: var(--accent);
  --atlas-accent-strong: var(--accent-hover);
  --atlas-accent-soft: var(--accent-soft);
  --atlas-accent-line: rgba(8, 73, 92, .24);
  --atlas-focus-ring: var(--focus-ring);
  --atlas-action: var(--accent);
  --atlas-action-hover: var(--accent-hover);
  --atlas-action-focus: rgba(8, 73, 92, .24);
  --atlas-home-accent: var(--accent);
  --atlas-home-accent-strong: var(--accent-hover);
  --atlas-home-accent-soft: var(--accent-soft);
  --atlas-home-accent-line: var(--line-strong);
  --s38-blue: var(--accent);
  --s38-blue-strong: var(--accent-hover);
  --s38-blue-soft: var(--accent-soft);
  --s38-blue-line: var(--line-strong);
  --blue-50: var(--bg-subtle);
  --blue-100: var(--accent-soft);
  --blue-200: var(--accent-soft-hover);
  --blue-400: var(--accent);
  --blue-500: var(--accent);
  --blue-600: var(--accent);
  --blue-700: var(--accent-hover);

  /* Status */
  --atlas-green: var(--positive);
  --atlas-green-soft: var(--positive-soft);
  --atlas-warn: var(--warning-icon);
  --atlas-warn-soft: var(--warning-soft);
  --atlas-danger: var(--danger);
  --atlas-danger-soft: var(--danger-soft);
  --atlas-info: var(--accent);
  --atlas-info-soft: var(--accent-soft);
  --atlas-home-teal: var(--positive);
  --atlas-home-teal-soft: var(--positive-soft);
  --atlas-home-warning: var(--warning-icon);
  --atlas-home-warning-soft: var(--warning-soft);

  /* S38 palette */
  --s38-ink: var(--text);
  --s38-muted: var(--text-2);
  --s38-bg: var(--bg);
  --s38-line: var(--line);
  --s38-shadow: var(--shadow-none);
  --s38-shadow-raised: var(--shadow-pop);
  --s38-radius: var(--r-lg);

  /* Glass: retired. Surfaces are opaque, borders are hairlines, no blur. */
  --glass-blur: none;
  --glass-fill: var(--surface);
  --glass-fill-strong: var(--surface);
  --glass-fill-soft: var(--bg-subtle);
  --glass-line: var(--line);
  --glass-line-strong: var(--line-strong);
  --glass-highlight: var(--shadow-none);
  --glass-shadow: var(--shadow-none);
  --glass-shadow-raised: var(--shadow-pop);
  --atlas-home-shadow: var(--shadow-none);
  --atlas-home-shadow-raised: var(--shadow-pop);

  /* Cards, radius and elevation */
  --atlas-radius: var(--r-lg);
  --atlas-card-radius: var(--r-lg);
  --atlas-card-shadow: var(--shadow-soft);      /* cards lift softly on the ivory canvas (ALCEDO) */
  --atlas-card-shadow-hover: var(--shadow-pop);
  --radius-sm: var(--r-sm);
  --radius-md: var(--r-md);
  --radius-lg: var(--r-lg);
  --radius-xl: var(--r-xl);
  --radius-pill: var(--r-pill);
  --shadow-2: var(--shadow-pop);
  --shadow-popover: var(--shadow-pop);

  /* Semantic aliases (S87) */
  --color-primary: var(--accent);
  --color-text: var(--text);
  --color-text-secondary: var(--text-2);
  --color-text-tertiary: var(--text-3);
  --color-border: var(--line);
  --color-background: var(--bg);
  --color-surface: var(--surface);
  --color-positive: var(--positive);
  --color-warning: var(--warning);
  --color-danger: var(--danger);
  --color-information: var(--accent);

  /* Spacing, type sizes, weights, controls and motion (S87 names) */
  --space-1: var(--s-1);
  --space-2: var(--s-2);
  --space-3: var(--s-3);
  --space-4: var(--s-4);
  --space-5: var(--s-5);
  --space-6: var(--s-6);
  --space-8: var(--s-8);
  --space-10: var(--s-10);
  --space-12: var(--s-12);
  --space-16: var(--s-16);
  --text-display: var(--fs-title);     /* page title */
  --text-title: var(--fs-section);     /* section heading */
  --text-heading: var(--fs-heading);   /* card heading */
  --text-body: var(--fs-body);
  --text-meta: var(--fs-label);
  --text-caption: var(--fs-caption);
  --text-micro: var(--fs-caption);     /* micro labels are retired: 12 px minimum */
  --text-kpi: var(--fs-kpi);
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --touch-target: var(--touch);
  /* --motion-fast, --motion-mid, --motion-slow, --ease-standard and --ease-in
     are defined once in the Motion section above (shared motion system). */
  --motion-base: var(--dur-2);
}
@media (max-width: 1279px) { :root { --page-gutter: 32px; } }
@media (max-width: 1023px) { :root { --page-gutter: 24px; } }
@media (max-width: 767px) {
  :root {
    --page-gutter: 16px;
    --type-display: 400 30px/36px var(--font-display);
    --type-title: 600 22px/28px var(--font-sans);
    --type-body: 400 15px/22px var(--font-sans);
    --type-kpi: 500 22px/28px var(--font-sans);
  }
}
/* Reduced motion: the movement tokens collapse to 0, so every transform that
   reads --move-sm / --move-md (button press, drawer/menu/toast slide, page
   entry) resolves to no movement while colour, shadow and opacity states stay
   intact. Durations/looping are additionally neutralized in atlas-base.css
   (global) and per-component reduced-motion blocks. Defined here because tokens
   may only be declared in this file. The mascot is unaffected — it reads none
   of these tokens and keeps its own reduced-motion handling. */
@media (prefers-reduced-motion: reduce) {
  :root { --move-sm: 0px; --move-md: 0px; }
}
}

/* =====================================================================
   ALCEDO self-hosted webfonts (OFL). Latin subsets pulled from Google
   Fonts and served from apps/web/assets/fonts/. Declared at file top
   level (outside the cascade layers, like every @font-face) so the type
   tokens above resolve to real faces. font-display:swap keeps text
   visible while the woff2 loads; the serif/sans/mono stacks fall back to
   Georgia / system-ui / ui-monospace if a face is unavailable.
   ===================================================================== */
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/InstrumentSerif-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/InstrumentSerif-Italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/Manrope-Variable.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/JetBrainsMono-Variable.woff2') format('woff2');
}