/* ============================================================================
   FM Astronomy — design tokens (v1)
   Cascade: primitives → roles → type → space → motion
   Spacing scale and page gutters follow Ten Four (foundations/tokens.css,
   --space-1…8). Grid lines, plus pattern and section theming follow the
   sstr.tech reference. Catalogued in ../fm-astronomy-design-system-v1.html.
   ============================================================================ */

@font-face { font-family: "Libron"; src: url("../fonts/Libron-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Libron"; src: url("../fonts/Libron-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Libron"; src: url("../fonts/Libron-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Libron"; src: url("../fonts/Libron-BoldItalic.woff2") format("woff2"); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url("../fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url("../fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  /* ---- Primitives · paper (light) ---------------------------------------- */
  --paper-50:  #f7f7f6;
  --paper-100: #eff0f1;   /* light section ground */
  --paper-150: #e0e1e3;   /* faint plus pattern, hover fill */
  --paper-200: #c3c4c8;   /* plus pattern on light */
  --paper-300: #a3a3a4;   /* hairline on light */

  /* ---- Primitives · ink (dark) ------------------------------------------- */
  --ink-500: #747576;     /* muted text, both themes */
  --ink-600: #464749;     /* hairline on dark (strong) */
  --ink-700: #2f3032;     /* hairline on dark, plus pattern on dark */
  --ink-750: #222326;     /* map land, raised dark cell */
  --ink-800: #18191b;     /* dark section ground */
  --ink-850: #141415;     /* map water, deepest cell */
  --ink-900: #0c0c0c;     /* ink: dither dots, display type on light */

  /* ---- Primitives · H-alpha (accent) ------------------------------------- */
  --halpha-100: #fbd9d2;
  --halpha-300: #f4907c;
  --halpha-500: #e5412d;  /* primary action, bullets, pins, reveal blocks */
  --halpha-600: #c93822;  /* hover / pressed */
  --halpha-800: #7c2214;

  /* ---- Primitives · red light (night mode) ------------------------------- */
  --night-ground: #000000;
  --night-ink:    #b3261e;
  --night-dim:    #5c140f;
  --night-line:   #2a0a07;
  --night-bright: #ff3b2f;

  /* Muted text is tuned per theme to clear WCAG AA (4.5:1) on its ground. */
  --muted-on-paper: #5c5d60;
  --muted-on-ink:   #8f9092;

  /* ---- Roles (light theme by default; sections opt into dark) ------------ */
  --ground:      var(--paper-100);
  --ground-2:    var(--paper-50);
  --text:        var(--ink-900);
  --text-muted:  var(--muted-on-paper);
  --line:        var(--paper-300);
  --line-soft:   var(--paper-200);
  --pattern:     var(--paper-200);
  --hover-fill:  var(--paper-150);
  --accent:      var(--halpha-500);
  --accent-hover:var(--halpha-600);
  --on-accent:   var(--ink-900);
  /* Dither: bright values print as --dither-hi, dark values as --dither-lo. */
  --dither-hi:   var(--paper-100);
  --dither-lo:   var(--ink-900);
  --focus:       var(--halpha-500);

  /* ---- Type --------------------------------------------------------------- */
  --font-serif: "Libron", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-mono:  "Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --fs-display: clamp(2.25rem, 1.5rem + 2.2vw, 3.5rem);  /* 36 → 56 */
  --fs-h2:      clamp(2.25rem, 1.5rem + 3vw, 4.5rem);    /* 36 → 72 */
  --fs-h3:      clamp(1.5rem, 1.2rem + 1.1vw, 2.25rem);  /* 24 → 36 */
  --fs-h4:      1.375rem;                                /* 22 */
  --fs-body:    1.125rem;                                /* 18 */
  --fs-small:   1rem;                                    /* 16 */
  --fs-figure:  clamp(2.5rem, 1.8rem + 2.6vw, 4.25rem);  /* 40 → 68 */
  --fs-label:   0.75rem;                                 /* 12 mono */
  --fs-micro:   0.6875rem;                               /* 11 mono */

  --lh-display: 0.94;
  --lh-heading: 1.04;
  --lh-body:    1.55;
  --track-display: -0.025em;
  --track-label:   0.08em;

  /* ---- Space (Ten Four scale, + two section steps) ------------------------ */
  --space-1: 0.25rem;  /*  4 */
  --space-2: 0.5rem;   /*  8 */
  --space-3: 0.75rem;  /* 12 */
  --space-4: 1rem;     /* 16 */
  --space-5: 1.5rem;   /* 24 */
  --space-6: 2rem;     /* 32 */
  --space-7: 3rem;     /* 48 */
  --space-8: 4rem;     /* 64 */
  --space-9: 6rem;     /* 96  section rhythm */
  --space-10: 8rem;    /* 128 section rhythm, desktop */

  /* Ten Four page gutters: desktop 24/32/32, phone 16 */
  --gutter: var(--space-6);
  --frame-margin: clamp(0px, 4.4vw - 16px, 64px);
  --frame-max: 1312px;
  --cell-pad: var(--space-6);
  --section-pad: var(--space-10);
  --nav-h: 64px;
  --golden: 1.618;
  --golden-fr: 1.618fr;   /* Ten Four workspace split 1 : 1.618 */

  /* ---- Shape -------------------------------------------------------------- */
  --hairline: 1px;
  --chamfer: 12px;
  --chamfer-sm: 6px;
  --field-h: 46px;          /* Ten Four field min-height */
  --button-h: 48px;
  --pattern-size: 16px;
  --dither-cell: 2px;

  /* ---- Motion ------------------------------------------------------------- */
  --ease-rise:  cubic-bezier(.16, 1, .3, 1);      /* Ten Four rise */
  --ease-std:   cubic-bezier(.4, 0, .2, 1);       /* Ten Four standard */
  --ease-sweep: cubic-bezier(.675, .15, .1, 1);   /* reference hover sweep */
  --dur-fast: 160ms;
  --dur-sweep: 420ms;
  --dur-reveal: 900ms;
  --dur-develop: 1400ms;
  --stagger: 45ms;
}

/* Dark sections — opt in with data-theme="dark" on any section or cell. */
[data-theme="dark"] {
  --ground:      var(--ink-800);
  --ground-2:    var(--ink-750);
  --text:        var(--paper-100);
  --text-muted:  var(--muted-on-ink);
  --line:        var(--ink-700);
  --line-soft:   var(--ink-750);
  --pattern:     var(--ink-700);
  --hover-fill:  var(--ink-750);
  --dither-hi:   var(--paper-100);
  --dither-lo:   var(--ink-800);
}
[data-theme="deep"] {
  --ground:      var(--ink-900);
  --ground-2:    var(--ink-850);
  --text:        var(--paper-100);
  --text-muted:  var(--muted-on-ink);
  --line:        var(--ink-700);
  --line-soft:   var(--ink-750);
  --pattern:     var(--ink-750);
  --hover-fill:  var(--ink-800);
  --dither-hi:   var(--paper-100);
  --dither-lo:   var(--ink-900);
}

/* Red-light night mode — preserves dark adaptation at the observing field. */
html[data-night] { color-scheme: dark; }
html[data-night],
html[data-night] [data-theme] {
  --ground:      var(--night-ground);
  --ground-2:    var(--night-ground);
  --text:        var(--night-ink);
  --text-muted:  var(--night-dim);
  --line:        var(--night-line);
  --line-soft:   var(--night-line);
  --pattern:     var(--night-line);
  --hover-fill:  #120302;
  --accent:      var(--night-ink);
  --accent-hover:var(--night-bright);
  --on-accent:   #000;
  --dither-hi:   var(--night-ink);
  --dither-lo:   #000;
  --focus:       var(--night-bright);
}

@media (max-width: 767px) {
  :root {
    --gutter: var(--space-4);
    --cell-pad: var(--space-5);
    --section-pad: var(--space-8);
    --nav-h: 56px;
    --chamfer: 10px;
  }
}