/*
 * FMBusiness — V2 design tokens (Neo-Swiss × Future Industry × Editorial).
 *
 * Canonical direction: docs/fmbusiness-design/FMB_DESIGN_DIRECTION_V2_NEOSWISS.md
 * Ink #12161F · Paper #FBFAF6 · White #FFFFFF · Signal #F0A500 ·
 * Space Grotesk display · Source Sans 3 body · IBM Plex Mono engineering metadata ·
 * functional radius scale · editorial island header.
 *
 * Fonts are self-hosted OFL woff2 (see fonts.css) — no font CDN at runtime.
 */


/* ------------------------------------------------------------------ *
 * 2. FM BUSINESS identity source (V2 — the product visual layer)
 * ------------------------------------------------------------------ */
:root {
  /* ---- Color roles (WCAG AA rules in docs/fmbusiness-design/… ) ---- */
  --fm-color-ink:           #12161F;  /* Ink — text + dark editorial surfaces  */
  --fm-color-ink-soft:      #1C222E;  /* raised surface on ink (subtle step)   */
  --fm-color-paper:         #FBFAF6;  /* Editorial Paper — page base           */
  --fm-color-white:         #FFFFFF;  /* card / content surfaces               */
  --fm-color-signal:        #F0A500;  /* Signal Orange — marks/surfaces on ink */
  --fm-on-signal:           #12161F;  /* type/rules ON the Signal surface (mode-independent: the signal stays bright) */
  --fm-color-amber-text:    #A05F00;  /* Accessible Amber — wording on light   */
  --fm-color-steel:         #5A6675;  /* Technical Steel — chrome/meta text    */
  --fm-color-steel-soft:    #667284;  /* legacy/large-only steel reference     */
  --fm-color-grid:          #D8DDE3;  /* Grid / Divider — hairlines, rules     */
  --fm-color-scrim:         rgba(18, 22, 31, 0.58);
  --fm-focus-ring:          var(--fm-color-amber-text); /* 2px ring on light  */

  /* ---- Theme-mode aware surfaces (light defaults — dark mode re-maps them) ---- */
  --fm-surface:             var(--fm-color-white);     /* cards, inputs      */
  --fm-surface-dark:        var(--fm-color-ink-soft);  /* island slabs       */
  --fm-surface-deep:        var(--fm-color-ink);       /* full-bleed dark    */
  --fm-on-dark:             var(--fm-color-paper);     /* type on dark       */
  --fm-on-dark-muted:       var(--fm-color-grid);      /* muted type on dark */
  --fm-shadow-soft:         0 10px 30px rgba(18, 22, 31, 0.10);
  color-scheme: light;

  /* ---- Typography (V2 families; self-hosted in /fonts) ---- */
  --fm-font-space-grotesk: 'Space Grotesk', 'Source Sans 3', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --fm-font-source-sans:   'Source Sans 3', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --fm-font-plex-mono:     'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* role → family */
  --fm-font-ui:   var(--fm-font-source-sans);      /* UI, nav, labels, body  */
  --fm-font-body: var(--fm-font-source-sans);      /* editorial reading      */
  --fm-font-disp: var(--fm-font-space-grotesk);    /* display heads          */
  --fm-font-data: var(--fm-font-plex-mono);        /* engineering metadata   */

  /* ---- Type scale (editorial; oversized display allowed) ---- */
  --fm-type-display:     72px;  /* statement headline, desktop               */
  --fm-type-display-md:  56px;  /* laptop                                    */
  --fm-type-display-sm:  42px;  /* tablet                                    */
  --fm-type-display-xs:  34px;  /* mobile                                    */
  --fm-type-h1:          62px;
  --fm-type-h1-mobile:   45px;
  --fm-type-h2:          26px;
  --fm-type-h3:          18px;
  --fm-type-body:        18px;
  --fm-type-caption:     13px;
  --fm-type-micro:       12px;
  --fm-type-unit:        13px;
  --fm-type-hero:        50px;  /* home / leads (legacy alias)               */
  --fm-type-section-num: 200px; /* oversized Swiss index number, desktop     */

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

  /* ---- Layout / geometry (carried from the clone) ---- */
  --fm-layout-header-h:    86px;
  --fm-layout-container:   800px;
  --fm-layout-home:        1280px;
  --fm-layout-rail-header: 1080px;  /* where inline nav collapses */
  --fm-layout-reading:     600px;   /* the content tunnel measure  */
  --fm-layout-control:     40px;    /* interactive hit target      */
  --fm-gutter:             24px;

  /* ---- Editorial island header (V2 signature) ---- */
  --fm-island-top:        16px;   /* sticky offset from the viewport top   */
  --fm-island-side:       24px;   /* side inset from the viewport edges    */
  --fm-island-pad:        24px;   /* inner padding (aligns with the grid)  */
  --fm-island-h:          68px;
  --fm-island-h-compact:  58px;   /* compact state after scroll            */
  --fm-island-radius:     26px;   /* architectural slab, not a pill        */
  --fm-island-max:        var(--fm-layout-home); /* island edges = grid edges */

  /* ---- Facility drawing grid ---- */
  --fm-grid-gap:  8px;
  --fm-grid-col:  4px;   /* "drawing grid" pulse unit */
  --fm-grid-soft: 16px;

  /* ---- Technical / drawing line weights ---- */
  --fm-line-hairline: 1px;   /* dimension rules, table rules, separators */
  --fm-line-warn:     2px;   /* structural "dimension" line weight */

  /* ---- Radius (V2 functional scale — not every box is rounded) ---- */
  --fm-radius-hero:  28px;   /* hero / major feature media (24–32)  */
  --fm-radius-card:  16px;   /* editorial media / card (14–18)      */
  --fm-radius-thumb: 12px;   /* thumbnail (10–14)                   */
  --fm-radius-btn:   14px;   /* buttons (12–16)                     */
  --fm-radius-chip:  999px;  /* chips / topic labels (pill)         */
  --fm-radius-panel: 32px;   /* large editorial frame               */
  --fm-radius-none:  0;      /* free editorial text block           */

  /* ---- Motion ---- */
  --fm-motion-fast: 120ms;
  --fm-motion-base: 200ms;
  --fm-motion-slow: 320ms;
  --fm-ease: cubic-bezier(0.2, 0, 0, 1);
}


/* ------------------------------------------------------------------ *
 * Dark mode — same roles, inverted.
 *
 * `data-theme` is rendered server-side from the `fmb_theme` cookie (see
 * inc/theme-mode.php), so a chosen mode never flashes; without a cookie the
 * system preference decides and the toggle writes the cookie.
 *
 * The islands (masthead / menu / footer) stay dark objects in both modes —
 * they read --fm-surface-dark + --fm-on-dark, never the inverted page roles.
 * ------------------------------------------------------------------ */
:root[data-theme="dark"] {
  --fm-color-ink:        #F2F0E9;
  --fm-color-ink-soft:   #1B212B;
  --fm-color-paper:      #12161F;
  --fm-color-white:      #1B212B;
  --fm-color-steel:      #98A2AF;
  --fm-color-steel-soft: #98A2AF;
  --fm-color-grid:       #3A4351;
  --fm-color-amber-text: #F0A500;
  --fm-color-scrim:      rgba(0, 0, 0, 0.62);
  --fm-focus-ring:       #F0A500;
  --fm-surface:          #1B212B;
  --fm-surface-dark:     #1B212B;
  --fm-surface-deep:     #171C25;
  --fm-on-dark:          #F2F0E9;
  --fm-on-dark-muted:    #98A2AF;
  --fm-shadow-soft:      0 12px 30px rgba(255, 255, 255, 0.05);
  color-scheme: dark;
}

/* No cookie yet: follow the system, but never override an explicit choice. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --fm-color-ink:        #F2F0E9;
    --fm-color-ink-soft:   #1B212B;
    --fm-color-paper:      #12161F;
    --fm-color-white:      #1B212B;
    --fm-color-steel:      #98A2AF;
    --fm-color-steel-soft: #98A2AF;
    --fm-color-grid:       #3A4351;
    --fm-color-amber-text: #F0A500;
    --fm-color-scrim:      rgba(0, 0, 0, 0.62);
    --fm-focus-ring:       #F0A500;
    --fm-surface:          #1B212B;
    --fm-surface-dark:     #1B212B;
    --fm-surface-deep:     #171C25;
    --fm-on-dark:          #F2F0E9;
    --fm-on-dark-muted:    #98A2AF;
    --fm-shadow-soft:      0 12px 30px rgba(255, 255, 255, 0.05);
    color-scheme: dark;
  }
}