/* == ./tokens/fonts.css == */
/* MARKETING OS — webfonts.
   NOTE: no font binaries were provided; loading from Google Fonts CDN.
   All three families ship full Cyrillic + Latin-Extended subsets.
   Display: Bitter (slab, characterful, used with restraint)
   Body:    Golos Text (high legibility at 14–16px, superb Cyrillic)
   Mono:    JetBrains Mono (data, IDs, ledger; tabular by nature) */

/* == ./tokens/colors.css == */
/* ============================================================
   MARKETING OS — COLOR TOKENS
   T-LAW 1: components consume ONLY semantic tokens. No raw hex
   in component files.
   T-LAW 2: a theme is a token map. Light and dark are two maps
   over the SAME semantic names. Tenant white-label overrides
   brand tokens only (--brand-*), never semantic structure.
   Resolution: semantic → theme map → tenant brand overrides.

   Theme scoping:
     :root                      = light (default map)
     [data-theme="dark"]        = forced dark (any subtree)
     @media prefers-color-scheme: dark + :root:not([data-theme="light"])
                                = auto mode follows the device
   ============================================================ */

/* ---------------- LIGHT MAP (default) ---------------- */
:root {
  color-scheme: light;

  /* Surfaces — warm paper, never sterile white base */
  --surface-base:    #F4F1EB;   /* app background */
  --surface-raised:  #FFFFFF;   /* cards */
  --surface-overlay: #FFFFFF;   /* sheets, popovers */
  --surface-sunken:  #ECE8E0;   /* wells, input backgrounds */
  --surface-inverse: #1E2A31;

  /* Text — blueprint ink, warm-neutral steps */
  --text-primary:   #1E2A31;
  --text-secondary: #51606A;
  --text-muted:     #5F6A71;   /* AA ≥4.5 on base + raised (was #7E8A91) */
  --text-inverse:   #F4F1EB;

  /* Ink placed ON a solid status/badge/functional fill (glyphs, letters).
     Theme-aware: white on the dark light-theme fills; dark ink on the
     light dark-theme fills. Keeps StatusDot/Badge glyphs AA in both themes. */
  --on-status: #FFFFFF;
  /* NO-LIVE stamp is a dark ink block in BOTH themes, so its label ink and
     door panels are theme-independent (defined once). */
  --status-no-live-ink:   #EDE8DF;
  --status-no-live-panel: #1E2226;

  /* Borders */
  --border-hairline: #E2DDD2;
  --border-strong:   #B8B1A2;

  /* Brand (tenant-overridable — platform default = copper) */
  --brand-accent:          #B25B2A;   /* copper */
  --brand-accent-hover:    #9E4F23;
  --brand-accent-contrast: #FFFFFF;
  --brand-accent-soft:     #F3E3D7;   /* tinted fills, selected states */

  /* Status — LOCKED platform-wide (Movement Map). Always color +
     shape/icon + label, never color alone. */
  --status-done:          #206A42;   /* green — darkened for AA on -soft (was #257A4C) */
  --status-current:       #2264C7;   /* blue, pulses ≤2Hz */
  --status-owner-review:  #7E5406;   /* amber — darkened for AA on -soft (was #A16A08) */
  --status-blocked:       #B23328;   /* red — darkened for AA on -soft (was #C03A2B) */
  --status-agent-running: #7A4EC0;   /* purple */
  --status-no-live:       #14181B;   /* black ink stamp */
  --status-no-live-edge:  #14181B;   /* brass edge in dark only */
  --status-future:        #5C656D;   /* gray — darkened for AA on -soft (was #79828A) */
  /* soft fills for status chips */
  --status-done-soft:          #DDEDE3;
  --status-current-soft:       #DDE8F8;
  --status-owner-review-soft:  #F3E8D2;
  --status-blocked-soft:       #F6DFDB;
  --status-agent-running-soft: #EAE2F7;
  --status-future-soft:        #E7E7E5;

  /* Data-source badges — fixed hues + letter glyphs, identical
     semantics in both themes. M / T / R / L */
  --badge-mock:       #6C6299;   /* M — gray-violet (darkened: #fff letter AA, was #837AA6) */
  --badge-owner-test: #297C70;   /* T — teal (darkened: #fff letter AA, was #2E8578) */
  --badge-runtime:    #4A6FA8;   /* R — steel blue */
  --badge-live:       #257A4C;   /* L — green */

  /* Functional set */
  --fn-danger:  #C03A2B;
  --fn-success: #257A4C;
  --fn-warn:    #A16A08;
  --fn-info:    #2264C7;

  /* Chart ramp — 6 categorical (trade materials) + sequential (copper) */
  --chart-1: #B25B2A;   /* copper */
  --chart-2: #35699E;   /* blueprint blue */
  --chart-3: #3E8A68;   /* patina */
  --chart-4: #9C7B22;   /* brass */
  --chart-5: #64798A;   /* brushed steel */
  --chart-6: #9D5468;   /* clay rose */
  --chart-seq-1: #F3E3D7;
  --chart-seq-2: #E2B896;
  --chart-seq-3: #CE8B58;
  --chart-seq-4: #B25B2A;
  --chart-seq-5: #7C3D1B;
  --chart-grid: #E2DDD2;
  --chart-axis: #7E8A91;

  /* Interaction */
  --focus-ring: #2264C7;
  --selection-bg: #F3E3D7;
  --scrollbar-thumb: #C9C2B4;
}

/* ---------------- DARK MAP ----------------
   Designed, not inverted: deep warm charcoal (blueprint at night),
   warm bias in large surfaces, accurate status hues, media cards
   get hairline borders (see base.css). */
[data-theme="dark"] {
  color-scheme: dark;

  --surface-base:    #191817;   /* deep warm charcoal, not #000 */
  --surface-raised:  #232120;   /* elevation = lighter step */
  --surface-overlay: #2C2927;
  --surface-sunken:  #131211;
  --surface-inverse: #EFEAE1;

  --text-primary:   #EDE8DF;
  --text-secondary: #B0A99C;
  --text-muted:     #9A9184;   /* AA ≥4.5 on base + raised (was #7F786C) */
  --text-inverse:   #1E2A31;

  /* dark fills are light pastels → glyph/letter ink must be dark to stay AA */
  --on-status: #17130D;

  --border-hairline: #35322E;
  --border-strong:   #57524A;

  --brand-accent:          #D98E55;   /* copper, lifted for dark */
  --brand-accent-hover:    #E5A06E;
  --brand-accent-contrast: #23140A;
  --brand-accent-soft:     #3A2A1D;

  --status-done:          #4FBC85;
  --status-current:       #619FEF;
  --status-owner-review:  #DFA83E;
  --status-blocked:       #E56A5B;
  --status-agent-running: #A98BE3;
  --status-no-live:       #0B0D0F;   /* ink… */
  --status-no-live-edge:  #9C7B22;   /* …stamped on brass */
  --status-future:        #948D80;   /* lightened for AA on -soft (was #78716A) */
  --status-done-soft:          #1E3229;
  --status-current-soft:       #1E2A3C;
  --status-owner-review-soft:  #362B15;
  --status-blocked-soft:       #3B211D;
  --status-agent-running-soft: #2C2438;
  --status-future-soft:        #282624;

  --badge-mock:       #9C93BE;
  --badge-owner-test: #4BA795;
  --badge-runtime:    #7395C7;
  --badge-live:       #4FBC85;

  --fn-danger:  #E56A5B;
  --fn-success: #4FBC85;
  --fn-warn:    #DFA83E;
  --fn-info:    #619FEF;

  --chart-1: #D98E55;
  --chart-2: #6E97C4;
  --chart-3: #66AE8C;
  --chart-4: #C2A045;
  --chart-5: #8FA3B3;
  --chart-6: #C07E92;
  --chart-seq-1: #3A2A1D;
  --chart-seq-2: #6B4426;
  --chart-seq-3: #9C6136;
  --chart-seq-4: #CE8B58;
  --chart-seq-5: #EFC49E;
  --chart-grid: #35322E;
  --chart-axis: #7F786C;

  --focus-ring: #619FEF;
  --selection-bg: #3A2A1D;
  --scrollbar-thumb: #4A463F;
}

/* ---------------- AUTO MODE (T-LAW 3) ----------------
   Auto is resolved BEFORE first paint by an inline script in <head>
   that stamps data-theme="light|dark" from the stored per-user pref
   or prefers-color-scheme — no FOUC, no duplicated token map:

   <script>
     var p = localStorage.getItem('os-theme');
     document.documentElement.dataset.theme =
       (p === 'light' || p === 'dark') ? p :
       (matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
   </script> */

/* == ./tokens/typography.css == */
/* ============================================================
   MARKETING OS — TYPOGRAPHY TOKENS
   3 roles. Full Cyrillic (RU) + Latin-Extended (ES) coverage at
   every weight is a hard constraint — no fallback mismatch.
   Display used with restraint; body legible at 14–16px.
   Fluid clamp() between 375 and 1440 breakpoints.
   ============================================================ */
:root {
  --font-display: "Bitter", "Iowan Old Style", Georgia, serif;
  --font-body: "Golos Text", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", Consolas, monospace;

  /* Scale (fluid) */
  --text-display: clamp(32px, calc(2.2vw + 24px), 44px); /* @kind other */
  --text-headline: clamp(24px, calc(1.2vw + 20px), 32px); /* @kind other */
  --text-title: clamp(18px, calc(0.6vw + 16px), 22px); /* @kind other */
  --text-body-lg: 16px;
  --text-body: 15px;                                 /* default UI */
  --text-sm: 13px;                                   /* metadata, captions */
  --text-xs: 12px;                                   /* badges, object_ids */

  /* Line heights */
  --leading-display: 1.15;
  --leading-heading: 1.25;
  --leading-body: 1.5;
  --leading-tight: 1.35;

  /* Weights */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Letter spacing */
  --tracking-display: -0.01em;
  --tracking-caps: 0.06em;    /* small all-caps labels */

  /* Line length cap for prose (Truth Report reader, etc.) */
  --measure-max: 68ch;
}

/* == ./tokens/spacing.css == */
/* ============================================================
   MARKETING OS — SPACING + RADIUS
   4px base grid. Radius is PURPOSEFUL, not uniform:
   radius encodes role.
   ============================================================ */
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* Card gutters per breakpoint (applied via media queries in layouts) */
  --gutter-phone: 16px;
  --gutter-tablet: 24px;
  --gutter-desktop: 32px;

  /* Radius encodes role */
  --radius-card: 12px;      /* cards, sheets */
  --radius-control: 8px;    /* buttons, inputs, selects */
  --radius-photo: 6px;      /* media thumbnails */
  --radius-badge: 4px;      /* badges, tags, chips */
  --radius-station: 999px;  /* subway stations = circles, pills */

  /* Touch */
  --touch-min: 44px;        /* minimum touch target */

  /* Density (desktop data views): comfortable default */
  --row-height: 44px;
}
[data-density="compact"] {
  --row-height: 32px;
}

/* == ./tokens/elevation.css == */
/* ============================================================
   MARKETING OS — ELEVATION
   Two ramps over the same tokens, 4 steps.
   Light = soft warm shadows. Dark = lighter surface steps
   (in colors.css) + subtle glow, never black drop-shadows.
   Media cards in dark additionally take a hairline border
   (--media-edge) so white-background photos don't float.
   ============================================================ */
:root {
  --elev-1: 0 1px 2px rgba(30, 42, 49, 0.06);
  --elev-2: 0 2px 6px rgba(30, 42, 49, 0.08), 0 1px 2px rgba(30, 42, 49, 0.05);
  --elev-3: 0 6px 16px rgba(30, 42, 49, 0.10), 0 2px 4px rgba(30, 42, 49, 0.06);
  --elev-4: 0 16px 40px rgba(30, 42, 49, 0.16), 0 4px 8px rgba(30, 42, 49, 0.06);
  --media-edge: transparent;   /* hairline on media cards: dark only */
}
[data-theme="dark"] {
  --elev-1: 0 0 0 1px rgba(237, 232, 223, 0.05);
  --elev-2: 0 0 0 1px rgba(237, 232, 223, 0.07), 0 0 12px rgba(217, 142, 85, 0.05);
  --elev-3: 0 0 0 1px rgba(237, 232, 223, 0.09), 0 0 24px rgba(217, 142, 85, 0.08);
  --elev-4: 0 0 0 1px rgba(237, 232, 223, 0.11), 0 0 48px rgba(217, 142, 85, 0.12);
  --media-edge: rgba(237, 232, 223, 0.14);
}
/* Auto mode: data-theme is stamped pre-paint (see tokens/colors.css). */

/* == ./tokens/motion.css == */
/* ============================================================
   MARKETING OS — MOTION
   Every animation has a reduced-motion fallback (T-LAW 4, Q3).
   Theme switch cross-fades tokens over --duration-theme;
   reduced-motion → instant swap.
   The blue "current" pulse is ≤2Hz and pauses under
   reduced-motion (replaced by a "▶ current" tag).
   ============================================================ */
:root {
  --duration-fast: 120ms; /* @kind other */
  --duration-base: 200ms; /* @kind other */
  --duration-expand: 320ms; /* @kind other */
  --duration-theme: 200ms; /* @kind other */

  --ease-standard: cubic-bezier(0.2, 0, 0, 1); /* @kind other */
  --ease-out: cubic-bezier(0, 0, 0.2, 1); /* @kind other */
  --ease-in: cubic-bezier(0.4, 0, 1, 1); /* @kind other */
  --ease-spring: cubic-bezier(0.34, 1.4, 0.4, 1); /* @kind other */

  --pulse-period: 1.6s; /* @kind other */
}

@keyframes os-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--status-current) 45%, transparent); }
  60%      { box-shadow: 0 0 0 6px transparent; }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms; /* @kind other */
    --duration-base: 0ms; /* @kind other */
    --duration-expand: 0ms; /* @kind other */
    --duration-theme: 0ms; /* @kind other */
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* == ./tokens/base.css == */
/* ============================================================
   MARKETING OS — BASE
   Minimal global surface: body defaults, focus, selection,
   scrollbars. Everything themes (T-LAW 5).
   ============================================================ */
body {
  margin: 0;
  background: var(--surface-base);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  transition: background-color var(--duration-theme) var(--ease-standard),
              color var(--duration-theme) var(--ease-standard);
}
::selection { background: var(--selection-bg); }
:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 2px;
}
* { scrollbar-color: var(--scrollbar-thumb) transparent; scrollbar-width: thin; }

/* Numbers in data are always tabular (Q11) */
.os-tabular, [data-tabular] { font-variant-numeric: tabular-nums; }

/* MARKETING OS — global CSS entry point.