/* ==========================================================================
   StrongMocha News Group · brand tokens
   Single source of truth. Every UI and page built for the group links this
   file (or mirrors these values, e.g. WordPress theme.json).

   Modes:  paper (default, light)  ·  roast (dark) via [data-mode="roast"]
   Umbrella rule: child publications may override ONLY the accent trio
   (--sm-accent, --sm-accent-soft, --sm-accent-ink) plus --sm-accent-contrast,
   the text colour used on solid accent fills. Everything else is fixed.
   ========================================================================== */

/* ----- fonts (bundled, no CDN) ------------------------------------------ */

/* Proprietary display family, designed for StrongMocha (brand/fonts/desktop/
   has installable TTFs for decks and PDFs). Doto remains as charset fallback. */
@font-face {
  font-family: "Mocha Dot";
  src: url("./fonts/mocha-dot-regular.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Mocha Dot";
  src: url("./fonts/mocha-dot-light.woff2") format("woff2");
  font-weight: 100 399;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Mocha Pixel";
  src: url("./fonts/mocha-pixel-regular.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Doto";
  src: url("./fonts/doto-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("./fonts/space-grotesk-latin.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("./fonts/source-serif-4-latin.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("./fonts/source-serif-4-italic-latin.woff2") format("woff2");
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Space Mono";
  src: url("./fonts/space-mono-400-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Space Mono";
  src: url("./fonts/space-mono-700-latin.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Space Mono";
  src: url("./fonts/space-mono-400-italic-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* ----- tokens ------------------------------------------------------------ */

:root {
  /* colour · paper mode */
  --sm-paper: #f4f1e9;
  --sm-card: #fbf9f4;
  --sm-ink: #211d17;
  --sm-ink-muted: #6e675c;
  --sm-line: #211d17;
  --sm-line-soft: #dad4c6;
  --sm-accent: #e4581f;
  --sm-accent-soft: #f7e4d4;
  --sm-accent-ink: #b23f12;
  --sm-accent-contrast: var(--sm-ink);   /* text on solid accent fills (AA) */
  --sm-shadow-color: #211d17;

  /* type */
  --sm-font-display: "Mocha Dot", "Doto", "Space Mono", monospace;
  --sm-font-pixel: "Mocha Pixel", "Doto", "Space Mono", monospace;
  --sm-font-head: "Space Grotesk", system-ui, -apple-system, sans-serif;
  --sm-font-body: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sm-font-mono: "Space Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* scale · real jumps, fluid where it matters */
  --sm-text-label: 0.8125rem;                            /* 13 mono labels   */
  --sm-text-small: 0.875rem;                             /* 14 meta, captions */
  --sm-text-body: 1.0625rem;                             /* 17 article body  */
  --sm-text-h4: clamp(1.25rem, 1.1rem + 0.6vw, 1.375rem);   /* 22 */
  --sm-text-h3: clamp(1.5rem, 1.3rem + 1vw, 1.75rem);       /* 28 */
  --sm-text-h2: clamp(1.875rem, 1.55rem + 1.6vw, 2.5rem);   /* 40 */
  --sm-text-h1: clamp(2.375rem, 1.9rem + 2.4vw, 3.5rem);    /* 56 */
  --sm-text-display: clamp(2.75rem, 2rem + 4vw, 4.75rem);   /* 76 */

  --sm-leading-body: 1.65;
  --sm-leading-head: 1.3;
  --sm-leading-display: 1.1;
  --sm-tracking-label: 0.15em;

  /* spacing · 8px rhythm, varied on purpose */
  --sm-space-1: 0.5rem;   /*  8 */
  --sm-space-2: 1rem;     /* 16 */
  --sm-space-3: 1.5rem;   /* 24 */
  --sm-space-4: 2.5rem;   /* 40 */
  --sm-space-5: 4rem;     /* 64 */
  --sm-space-6: 6rem;     /* 96 */

  /* layout */
  --sm-width-shell: 75rem;   /* 1200 */
  --sm-measure: 66ch;

  /* shape + elevation · sharp and hard, never blurred */
  --sm-radius: 2px;
  --sm-border: 1px solid var(--sm-line);
  --sm-shadow: 4px 4px 0 var(--sm-shadow-color);
  --sm-shadow-hover: 6px 6px 0 var(--sm-shadow-color);
  --sm-shadow-pressed: 2px 2px 0 var(--sm-shadow-color);
  --sm-shadow-accent: 4px 4px 0 var(--sm-accent);

  /* motion */
  --sm-ease: cubic-bezier(0.2, 0, 0, 1);
  --sm-quick: 150ms;
  --sm-normal: 200ms;
}

/* colour · roast mode (dark) · set data-mode="roast" on html, body, or any section */
[data-mode="roast"] {
  --sm-paper: #191612;
  --sm-card: #221e19;
  --sm-ink: #f2eee4;
  --sm-ink-muted: #a39a8b;
  --sm-line: #f2eee4;
  --sm-line-soft: #3a342c;
  --sm-accent: #ee6a2c;
  --sm-accent-soft: #33251c;
  --sm-accent-ink: #f08a55;
  --sm-accent-contrast: var(--sm-paper);
  --sm-shadow-color: #f2eee4;

  /* composite tokens re-declared so they re-resolve against the roast palette
     when the mode is set on a section (var() substitutes where declared) */
  --sm-border: 1px solid var(--sm-line);
  --sm-shadow: 4px 4px 0 var(--sm-shadow-color);
  --sm-shadow-hover: 6px 6px 0 var(--sm-shadow-color);
  --sm-shadow-pressed: 2px 2px 0 var(--sm-shadow-color);
  --sm-shadow-accent: 4px 4px 0 var(--sm-accent);

  background-color: var(--sm-paper);
  color: var(--sm-ink);
}

/* publication accent overrides · the ONLY thing a child site may change     */
[data-publication="signal"] {         /* tech & AI */
  --sm-accent: #0f6b62;
  --sm-accent-soft: #dcebe4;
  --sm-accent-ink: #0d574f;
  --sm-accent-contrast: #f2eee4;       /* cream on teal, AA */
  --sm-shadow-accent: 4px 4px 0 var(--sm-accent);
}
[data-publication="ledger"] {         /* business */
  --sm-accent: #8c2f2f;
  --sm-accent-soft: #f2e0da;
  --sm-accent-ink: #7a2626;
  --sm-accent-contrast: #f2eee4;       /* cream on oxblood, AA */
  --sm-shadow-accent: 4px 4px 0 var(--sm-accent);
}
[data-publication="navigator"] {      /* IdeaNavigator AI */
  --sm-accent: #38743f;
  --sm-accent-soft: #e0ebdc;
  --sm-accent-ink: #2e5d35;
  --sm-accent-contrast: #f2eee4;       /* cream on leaf green, AA 4.85 */
  --sm-shadow-accent: 4px 4px 0 var(--sm-accent);
}

/* publication accents in roast (dark) mode · the [data-mode="roast"] block resets
   the accent trio to roast orange, so a publication used on dark bands (hero,
   footer, dashboards) needs its accent re-applied at a roast-legible tint.
   signal (tech & AI) is defined; add ledger/navigator here if they go dark.     */
[data-publication="signal"][data-mode="roast"],
[data-publication="signal"] [data-mode="roast"] {
  --sm-accent: #2fa593;                /* brighter teal, legible on roast paper (AA) */
  --sm-accent-soft: #16302b;
  --sm-accent-ink: #5ac7b7;
  --sm-accent-contrast: #191612;       /* dark ink on bright teal fills, AA */
  --sm-shadow-accent: 4px 4px 0 var(--sm-accent);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --sm-quick: 0ms;
    --sm-normal: 0ms;
  }
}