/* ==========================================================================
   Mosaic — Landing Design Language · tokens
   Copy this file verbatim into any generated HTML for the Mosaic landing page.
   Authority: ./language.md owns intent and usage rules; this file owns values.
   Independent of the Mosaic product UI contract (frontend/DESIGN.md). Do not
   mix the two token sets in one document.
   ========================================================================== */

:root {
  /* --- Raw palette · dark field ------------------------------------------ */
  --mos-field-900: #0A0C10;   /* page ground */
  --mos-field-800: #12151B;   /* raised band, input wells */
  --mos-field-700: #1E232C;   /* hairline on dark */
  --mos-field-ink: #EDEFF3;   /* primary text on dark   — 17.0:1 */
  --mos-field-ink-2: #B9C0CC; /* secondary text on dark — 10.7:1 */
  --mos-field-ink-3: #8A93A3; /* muted / mono labels    —  6.3:1 */

  /* --- Raw palette · light paper ----------------------------------------- */
  --mos-paper-000: #FFFFFF;   /* raised card on paper */
  --mos-paper-100: #F7F6F3;   /* page ground (warm, not blue-white) */
  --mos-paper-300: #E2E0DA;   /* hairline on paper */
  --mos-paper-ink: #14161A;   /* primary text on light  — 16.8:1 */
  --mos-paper-ink-2: #5A6068; /* secondary text         —  5.9:1 */

  /* --- Signal ------------------------------------------------------------- */
  --mos-signal: #E8A33D;      /* amber on dark: 9.1:1 as text, fill anywhere */
  --mos-signal-deep: #8A5A14; /* amber for TEXT on paper — 5.5:1 */
  --mos-signal-rule: #B3761C; /* amber for RULES/fills on paper — 3.5:1, never text */
  --mos-verified: #4FB3A6;    /* connected/verified state on dark — 7.8:1 */

  /* --- Network motif ------------------------------------------------------ */
  --mos-node-line: #55637A;   /* meaning-bearing nodes + edges — 3.2:1 on field */
  --mos-node-tail: #2A3441;   /* ambient long tail — decorative only, 1.6:1 */
  --mos-node-junction: var(--mos-signal); /* the single consolidated node */

  /* --- Type families ------------------------------------------------------ */
  --mos-font-display: "Bricolage Grotesque", "Arial Narrow", system-ui, sans-serif;
  --mos-font-text: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mos-font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* --- Type scale (fluid, 360px → 1440px) --------------------------------- */
  --mos-text-wordmark: clamp(2.75rem, 1.6rem + 5.1vw, 6rem);
  --mos-text-display:  clamp(2.25rem, 1.4rem + 3.8vw, 4.5rem);
  --mos-text-h2:       clamp(1.75rem, 1.3rem + 2.0vw, 2.75rem);
  --mos-text-h3:       clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);
  --mos-text-lead:     clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);
  --mos-text-body:     1.0625rem;   /* 17px */
  --mos-text-small:    0.9375rem;   /* 15px */
  --mos-text-label:    0.75rem;     /* 12px mono, uppercase */

  --mos-leading-display: 1.04;
  --mos-leading-head: 1.12;
  --mos-leading-body: 1.6;
  --mos-tracking-wordmark: -0.03em;
  --mos-tracking-display: -0.02em;
  --mos-tracking-label: 0.12em;

  /* Bricolage Grotesque variable axes — set width, do not fake it with scaleX */
  --mos-wordmark-variation: "opsz" 96, "wdth" 85, "wght" 600;
  --mos-display-variation:  "opsz" 72, "wdth" 92, "wght" 450;
  --mos-h2-variation:       "opsz" 40, "wdth" 96, "wght" 500;

  /* --- Space (8px base) ---------------------------------------------------- */
  --mos-space-1: 0.5rem;   --mos-space-2: 1rem;    --mos-space-3: 1.5rem;
  --mos-space-4: 2rem;     --mos-space-6: 3rem;    --mos-space-8: 4rem;
  --mos-space-12: 6rem;    --mos-space-16: 8rem;   --mos-space-20: 10rem;

  --mos-section-pad: clamp(4rem, 2rem + 8vw, 10rem);
  --mos-measure: 62ch;
  --mos-content-max: 1200px;

  /* --- Geometry ------------------------------------------------------------ */
  --mos-radius-control: 2px;   /* inputs + buttons only */
  --mos-radius-node: 1px;      /* square nodes, barely softened */
  --mos-hairline: 1px;
  --mos-stroke-edge: 1px;      /* network edges; use vector-effect non-scaling-stroke */
  --mos-corner-elbow: 4px;     /* rounded elbow where an orthogonal edge turns */
  /* No shadows. Elevation is surface value + hairline. */

  /* --- Motion --------------------------------------------------------------- */
  --mos-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --mos-dur-fast: 140ms;
  --mos-dur-ui: 240ms;
  --mos-dur-reveal: 3000ms;   /* the single network reveal sequence; plays once */
}

/* ==========================================================================
   Semantic surfaces. A section declares its surface; semantic tokens flip.
   <section data-surface="field"> … dark, the complexity
   <section data-surface="paper"> … light, the resolution
   The page transitions field → paper exactly once. There is no theme toggle
   and no prefers-color-scheme response: the narrative is fixed.
   ========================================================================== */

[data-surface="field"] {
  --surface: var(--mos-field-900);
  --surface-raised: var(--mos-field-800);
  --hairline: var(--mos-field-700);
  --text: var(--mos-field-ink);
  --text-2: var(--mos-field-ink-2);
  --text-muted: var(--mos-field-ink-3);
  --accent: var(--mos-signal);
  --accent-text: var(--mos-signal);
  --accent-on: var(--mos-field-900);   /* text on an amber fill */
  --focus: var(--mos-signal);
}

[data-surface="paper"] {
  --surface: var(--mos-paper-100);
  --surface-raised: var(--mos-paper-000);
  --hairline: var(--mos-paper-300);
  --text: var(--mos-paper-ink);
  --text-2: var(--mos-paper-ink-2);
  --text-muted: var(--mos-paper-ink-2);
  --accent: var(--mos-signal-rule);     /* rules + fills */
  --accent-text: var(--mos-signal-deep);/* text only */
  --accent-on: var(--mos-paper-ink);   /* ink on the amber fill: 4.7:1; white would be 3.8:1 */
  --focus: var(--mos-signal-deep);
}

/* --- Base ----------------------------------------------------------------- */
body {
  background: var(--mos-field-900);
  color: var(--mos-field-ink);
  font-family: var(--mos-font-text);
  font-size: var(--mos-text-body);
  line-height: var(--mos-leading-body);
  -webkit-font-smoothing: antialiased;
}

section { background: var(--surface); color: var(--text); }

/* --- Register: instrument (mono) ------------------------------------------ */
.mos-label {
  font-family: var(--mos-font-mono);
  font-size: var(--mos-text-label);
  letter-spacing: var(--mos-tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* --- Register: display ----------------------------------------------------- */
.mos-wordmark {
  font-family: var(--mos-font-display);
  font-variation-settings: var(--mos-wordmark-variation);
  font-size: var(--mos-text-wordmark);
  letter-spacing: var(--mos-tracking-wordmark);
  line-height: 1;
  color: var(--text);
}
.mos-display {
  font-family: var(--mos-font-display);
  font-variation-settings: var(--mos-display-variation);
  font-size: var(--mos-text-display);
  letter-spacing: var(--mos-tracking-display);
  line-height: var(--mos-leading-display);
  text-wrap: balance;
}

/* --- Focus (one visible treatment everywhere) ------------------------------ */
:where(a, button, input, [tabindex]):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--mos-radius-control);
}

/* --- Motion policy --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
  /* The network renders in its resolved end state. Never mid-animation. */
}