/*
  Atlas Design Tokens
  ===================
  Source: Atlas Design Constitution (Typography System ATLAS-003, Master
  Editorial Grid System ATLAS-002, FilterChoice Design Constitution).

  This is the FIRST implementation of those documents as real CSS. It is not
  yet applied across every page — see docs/ROADMAP.md, Beta 3.53 "Design
  Token Adoption." Until then, existing page styles remain authoritative;
  new pages (including the customer portal) should build on these tokens
  from day one instead of hand-picking colors again.

  Note: the source brand documents themselves disagree slightly on the type
  scale between ATLAS-002 (Grid System) and ATLAS-003 (Typography System).
  This file follows ATLAS-003 as canonical since it's the dedicated
  typography spec — flagged here rather than silently resolved, so a
  designer can confirm.
*/

:root {
  /* --- Color: primary palette --- */
  --atlas-navy:  #0B1D2D;  /* primary text, headings, authority */
  --atlas-blue:  #0D4BDD;  /* links, accents, key highlights, trust */
  --atlas-aqua:  #00A4EF;  /* water elements, data highlights, active states */
  --atlas-ice:   #E8F4FE;  /* background tints, subtle separators */
  --atlas-slate: #66707A;  /* secondary text, icons, UI elements */
  --atlas-steel: #A7B0BB;  /* borders, dividers, neutral elements */
  --atlas-white: #FFFFFF;  /* clean space, product presentation */

  /* --- Color: neutral scale (900 = darkest) --- */
  --atlas-neutral-900: #0B1D2D;
  --atlas-neutral-800: #1C2E3E;
  --atlas-neutral-700: #33465A;
  --atlas-neutral-600: #4A5F73;
  --atlas-neutral-400: #8C99A8;
  --atlas-neutral-300: #B4BFC9;
  --atlas-neutral-200: #D6DEE5;
  --atlas-neutral-100: #EEF2F6;
  --atlas-neutral-50:  #F8FAFC;
  --atlas-neutral-0:   #FFFFFF;

  /* --- Semantic color aliases (use these in components, not raw palette) --- */
  --atlas-color-bg:            var(--atlas-white);
  --atlas-color-bg-subtle:     var(--atlas-neutral-50);
  --atlas-color-bg-tint:       var(--atlas-ice);
  --atlas-color-text:          var(--atlas-navy);
  --atlas-color-text-secondary:var(--atlas-slate);
  --atlas-color-border:        var(--atlas-steel);
  --atlas-color-accent:        var(--atlas-blue);
  --atlas-color-accent-active: var(--atlas-aqua);

  /* --- Typography: families --- */
  --atlas-font-display:  "TT Norms Pro", "Inter", system-ui, sans-serif; /* Display, Hero */
  --atlas-font-body:     "Inter", system-ui, sans-serif;                /* Title..Annotation */
  --atlas-font-technical:"Space Mono", ui-monospace, monospace;         /* data, tables, part numbers */
  --atlas-font-revision: "Inter Condensed", "Inter", system-ui, sans-serif; /* metadata, footers */

  /* --- Typography: scale (size/line-height), per ATLAS-003 --- */
  --atlas-type-display:    72px/80px; --atlas-track-display:    -0.04em;
  --atlas-type-hero:       48px/56px; --atlas-track-hero:       -0.02em;
  --atlas-type-title:      28px/36px; --atlas-track-title:      -0.01em;
  --atlas-type-section:    20px/28px; --atlas-track-section:     0.08em;
  --atlas-type-heading:    16px/24px; --atlas-track-heading:     0em;
  --atlas-type-body:       11px/18px; --atlas-track-body:        0em;
  --atlas-type-caption:     9px/14px; --atlas-track-caption:     0em;
  --atlas-type-annotation:  9px/14px; --atlas-track-annotation:  0em;
  --atlas-type-revision:    8px/12px; --atlas-track-revision:    0.04em;

  /* --- Spacing scale (8px baseline grid, per ATLAS-002) --- */
  --atlas-space-xs:  8px;
  --atlas-space-s:   16px;
  --atlas-space-m:   24px;
  --atlas-space-l:   40px;
  --atlas-space-xl:  64px;
  --atlas-space-xxl: 96px;

  /* --- Grid --- */
  --atlas-grid-columns: 12;
  --atlas-grid-gutter:  24px;
  --atlas-grid-margin:  64px;
  --atlas-content-width: 1140px;
  --atlas-max-page-width: 1440px;

  /* --- Radius / elevation (conservative defaults; not yet in a source doc) --- */
  --atlas-radius-s: 4px;
  --atlas-radius-m: 8px;
  --atlas-radius-l: 16px;
  --atlas-shadow-card: 0 1px 2px rgba(11, 29, 45, 0.06), 0 4px 12px rgba(11, 29, 45, 0.06);
}

/* Utility classes for the customer-facing surfaces (portal, marketing site)
   that are being built fresh — the operator app can adopt these
   incrementally per docs/ROADMAP.md 3.53 instead of a risky big-bang pass. */
.atlas-text-display   { font: 300 var(--atlas-type-display) var(--atlas-font-display); letter-spacing: var(--atlas-track-display); color: var(--atlas-color-text); }
.atlas-text-hero       { font: 700 var(--atlas-type-hero) var(--atlas-font-display); letter-spacing: var(--atlas-track-hero); color: var(--atlas-color-text); }
.atlas-text-title      { font: 600 var(--atlas-type-title) var(--atlas-font-body); letter-spacing: var(--atlas-track-title); color: var(--atlas-color-text); }
.atlas-text-section    { font: 500 var(--atlas-type-section) var(--atlas-font-body); letter-spacing: var(--atlas-track-section); color: var(--atlas-color-text-secondary); text-transform: uppercase; }
.atlas-text-heading    { font: 600 var(--atlas-type-heading) var(--atlas-font-body); letter-spacing: var(--atlas-track-heading); color: var(--atlas-color-text); }
.atlas-text-body       { font: 400 var(--atlas-type-body) var(--atlas-font-body); letter-spacing: var(--atlas-track-body); color: var(--atlas-color-text); }
.atlas-text-caption    { font: 400 var(--atlas-type-caption) var(--atlas-font-body); letter-spacing: var(--atlas-track-caption); color: var(--atlas-color-text-secondary); }
.atlas-text-technical  { font: 400 14px/20px var(--atlas-font-technical); font-variant-numeric: tabular-nums; color: var(--atlas-color-text); }

.atlas-surface {
  background: var(--atlas-color-bg);
  border: 1px solid var(--atlas-color-border);
  border-radius: var(--atlas-radius-m);
  box-shadow: var(--atlas-shadow-card);
}
.atlas-container {
  max-width: var(--atlas-max-page-width);
  margin: 0 auto;
  padding-left: var(--atlas-grid-margin);
  padding-right: var(--atlas-grid-margin);
}