/* ============================================================================
 * Atlas Design System — colors_and_type.css (aggregated entry)
 *
 * This is the single-file entry point a downstream agent should link to inherit
 * the full Atlas visual contract: webfonts, colour roles, type scale, spacing,
 * radii, shadows. It mirrors the contents of `styles.css` + every file under
 * `tokens/` so packages that prefer a single CSS dependency can use it.
 *
 * If you want to pull tokens by concern, link `styles.css` instead — it imports
 * the modular files under `tokens/`.
 *
 * Source of truth: this file is generated from the captured Atlas evidence
 * under `context/local-code/atlas-design-system/files/tokens/`.
 * ============================================================================ */

/* ---- Webfonts ---------------------------------------------------------------
 * Atlas typography contract:
 *   Display — Newsreader (editorial serif, optical sizes)
 *   UI sans — Hanken Grotesk (humanist grotesk)
 *   Mono    — IBM Plex Mono (event hashes, refs, codes)
 * Loaded via Google Fonts CDN. Replace with self-hosted @font-face rules in
 * `fonts/` for production.
 * --------------------------------------------------------------------------- */
@import url("https://fonts.googleapis.com/css2?family=Newsreader:opsz,wght@6..72,400;6..72,500;6..72,600&family=Hanken+Grotesk:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap");

:root {
  /* ====== COLOUR =========================================================== */

  /* Accent — "Flush" (raspberry / coral). 600 is primary. */
  --at-flush-50:  #FFF1F4;
  --at-flush-100: #FFE2E9;
  --at-flush-200: #FFC8D4;
  --at-flush-300: #F7A3B6;
  --at-flush-400: #F0738F;
  --at-flush-500: #E94E72;
  --at-flush-600: #E03A63;
  --at-flush-700: #C12B51;
  --at-flush-800: #981F3F;
  --at-flush-900: #6C162C;

  /* Neutral — "Plum" (warm plum-charcoal). 900 powers dark sidebars/overlays. */
  --at-plum-950: #1E1019;
  --at-plum-900: #241420;
  --at-plum-800: #3C2A38;
  --at-plum-700: #5D4A57;
  --at-plum-600: #877A84;
  --at-plum-500: #B2A8AF;
  --at-plum-400: #D1CACF;
  --at-plum-300: #E3DDE1;
  --at-plum-200: #EEE9EC;
  --at-plum-100: #F5F1F4;
  --at-plum-50:  #FAF8FA;

  /* Base */
  --at-black: #150F14;
  --at-ink:   #221C26;
  --at-white: #FFFFFF;

  /* Semantic status (success / warning / info / role-change lavender) */
  --at-success-bg:    rgba(31, 138, 91, 0.13);
  --at-success-fg:    #1B6E48;
  --at-success-solid: #1F8A5B;
  --at-warning-bg:    rgba(184, 121, 30, 0.16);
  --at-warning-fg:    #8A5A12;
  --at-warning-solid: #C58A2C;
  --at-info-bg:       rgba(63, 115, 181, 0.14);
  --at-info-fg:       #2F5B92;
  --at-info-solid:    #3F73B5;
  --at-role:          #B07FE0;

  /* Work-group category tints */
  --at-cat-1: #E03A63;   /* "Bubble" — strategic product lines */
  --at-cat-2: #3F73B5;   /* "Country" — payroll / entity */
  --at-cat-3: #C58A2C;   /* "Other"  — cross-cutting initiatives */

  /* Semantic foreground roles */
  --fg-1: var(--at-black);
  --fg-2: var(--at-ink);
  --fg-3: var(--at-plum-700);
  --fg-4: var(--at-plum-600);
  --fg-accent:  var(--at-flush-600);
  --fg-inverse: var(--at-white);

  /* Semantic background roles */
  --bg-page:        var(--at-white);
  --bg-tint:        var(--at-plum-100);  /* app canvas */
  --bg-tint-accent: var(--at-flush-50);
  --bg-dark:        var(--at-plum-900);  /* sidebar, overlays, scrubber */
  --bg-accent:      var(--at-flush-600);

  /* Borders */
  --border-subtle: var(--at-plum-300);
  --border-line:   var(--at-plum-400);
  --border-accent: var(--at-flush-600);

  /* Person-kind two-colour encoding (employee vs contractor) */
  --kind-employee:   var(--at-plum-900);
  --kind-contractor: var(--at-flush-600);

  /* ====== TYPE ============================================================= */

  --font-display: "Newsreader", "Spectral", Georgia, serif;
  --font-sans:    "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Dense internal-tool type scale */
  --fs-display-lg: 48px; --lh-display-lg: 52px;
  --fs-h1: 32px;         --lh-h1: 38px;
  --fs-h2: 24px;         --lh-h2: 30px;
  --fs-h3: 20px;         --lh-h3: 26px;
  --fs-h4: 16px;         --lh-h4: 22px;
  --fs-h5: 14px;         --lh-h5: 20px;
  --fs-h6: 13px;         --lh-h6: 18px;
  --fs-body-1: 13px;     --lh-body-1: 18px;
  --fs-body-2: 12px;     --lh-body-2: 16px;
  --fs-body-3: 11px;     --lh-body-3: 15px;

  --tracking-eyebrow: 0.16em;
  --tracking-caps:    0.06em;

  /* ====== SPACING ========================================================== */

  --space-2xs: 4px;
  --space-xs:  8px;
  --space-sm:  12px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;
  --space-2xl: 40px;
  --space-3xl: 48px;
  --space-4xl: 64px;
  --space-5xl: 80px;

  /* Component density anchors used across Atlas */
  --row-height:     36px;
  --control-height: 28px;
  --cell-pad-y:     16px;
  --cell-pad-x:     18px;

  /* ====== RADII + SHADOWS ================================================== */

  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  /* Plum-tinted shadows (never neutral black) */
  --shadow-sm: 0 1px 2px rgba(30, 16, 25, 0.06), 0 1px 1px rgba(30, 16, 25, 0.04);
  --shadow-md: 0 6px 20px rgba(30, 16, 25, 0.09);
  --shadow-lg: 0 20px 48px rgba(30, 16, 25, 0.16);

  /* Focus ring (Flush 600 at 18% alpha) */
  --ring-accent: 0 0 0 3px rgba(224, 58, 99, 0.18);
}

/* ---- Typography helpers (opt-in) ----
 * Wrap content in `.at-type` to inherit Atlas defaults. Apply `.at-display`,
 * `.at-h1`–`.at-h5`, `.at-body`, `.at-meta`, `.at-mono`, `.at-num`, or
 * `.at-eyebrow` to individual elements.
 */
.at-type     { font-family: var(--font-sans); color: var(--fg-2); font-size: var(--fs-body-1); line-height: var(--lh-body-1); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
.at-display  { font-family: var(--font-display); font-weight: 500; color: var(--fg-1); line-height: 1.04; letter-spacing: -0.01em; }
.at-h1       { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: -0.01em; color: var(--fg-1); margin: 0; }
.at-h2       { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h2); line-height: var(--lh-h2); color: var(--fg-1); margin: 0; }
.at-h3       { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h3); line-height: var(--lh-h3); color: var(--fg-1); margin: 0; }
.at-h5       { font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-h5); line-height: var(--lh-h5); color: var(--fg-1); margin: 0; }
.at-body     { font-family: var(--font-sans); font-size: var(--fs-body-1); line-height: var(--lh-body-1); color: var(--fg-2); }
.at-meta     { font-family: var(--font-sans); font-size: var(--fs-body-3); line-height: var(--lh-body-3); color: var(--fg-3); }
.at-mono     { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.at-num      { font-family: var(--font-display); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.at-eyebrow  { font-family: var(--font-sans); font-weight: 600; font-size: 10px; line-height: 1; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--fg-accent); }