/* =========================================================
   SUNDAY COMICS — design tokens  (v1.0, Oct 2026)
   The single source of truth for colour, type, space and motion.
   Every page links this file first, then base.css.

   The look: a sunny comic-paper page with halftone dots,
   thick ink outlines, hard offset shadows and bold coloured
   panels (cobalt, red, emerald, plum). No plain white walls.
   Previous themes are kept in /theme/archive/
   (gallery-white, ledger-noir).
   ========================================================= */

@import url("https://fonts.googleapis.com/css2?family=Geist:wght@300..800&family=Geist+Mono:wght@400;500&display=swap");

/* Comic lettering, self-hosted (SIL Open Font License) */
@font-face { font-family: "Bangers"; src: url("../assets/fonts/bangers-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Kalam"; src: url("../assets/fonts/kalam-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Kalam"; src: url("../assets/fonts/kalam-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  /* ---- Raw palette ---- */
  --ink:        #111111;
  --paper:      #FFE9A6;   /* the page: sunny newsprint */
  --paper-dot:  rgba(214, 140, 18, .17);
  --paper-deep: #FFD970;
  --panel:      #FFFBF0;   /* inside a comic panel */
  --panel-2:    #FFF2CC;

  --cobalt-700: #1F44D6;
  --cobalt-500: #2E5BFF;   /* signature accent */
  --cobalt-300: #8DA2FF;
  --cobalt-50:  #E4EAFF;
  --sky-300:    #8FD3FF;

  --red-500:    #E63946;   /* the spark */
  --red-300:    #FF8A93;
  --pink-300:   #FF8FB1;
  --emerald-800:#0F3D2E;
  --emerald-500:#1F8A63;
  --emerald-300:#7FD6AE;
  --plum-600:   #5B2A86;
  --plum-300:   #C9A4F0;
  --plum-50:    #F1E6FF;
  --sun-400:    #FFC93C;

  /* Kept for older selectors */
  --white: #FFFFFF; --black: #111111;
  --gray-50: var(--panel-2); --gray-100: var(--panel-2); --gray-200: rgba(17,17,17,.16);
  --gray-300: rgba(17,17,17,.35); --gray-500: #77664A; --gray-700: #3B3220;

  /* ---- Semantic tokens ---- */
  --bg:             var(--paper);
  --bg-sunken:      var(--paper-deep);
  --surface:        var(--panel);
  --surface-raised: var(--panel-2);
  --surface-deep:   var(--cobalt-500);

  --text:         var(--ink);
  --text-soft:    #3B3220;
  --text-muted:   #77664A;
  --text-inverse: var(--panel);

  --rule:        rgba(17, 17, 17, .16);
  --rule-strong: var(--ink);

  --accent:       var(--cobalt-500);
  --accent-hover: var(--cobalt-700);
  --accent-text:  var(--cobalt-700);
  --on-accent:    #FFFFFF;
  --spark:        var(--red-500);

  --link:         var(--cobalt-700);
  --link-hover:   var(--red-500);
  --highlight:    var(--plum-600);
  --highlight-bg: var(--plum-50);
  --positive:     var(--emerald-500);

  --selection-bg: var(--ink);
  --selection-fg: var(--sun-400);
  --focus: 0 0 0 3px var(--sun-400), 0 0 0 6px var(--ink);
  color-scheme: light;

  /* ---- Comic layer ---- */
  --comic-font: "Kalam", "Comic Sans MS", "Chalkboard SE", system-ui, sans-serif;
  --sfx-font:   "Bangers", "Impact", "Arial Black", sans-serif;
  --comic-line: 3px;
  --comic-shadow: 5px 5px 0 var(--ink);
  --comic-shadow-sm: 3px 3px 0 var(--ink);
  --halftone: radial-gradient(circle, var(--paper-dot) 1.3px, transparent 1.8px) 0 0 / 14px 14px;

  /* ---- Typography ---- */
  --font-display: "Bangers", "Impact", "Arial Black", sans-serif;
  --font-body:    "Geist", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "Geist Mono", ui-monospace, "SF Mono", Consolas, monospace;
  --display-weight: 400;
  --display-tracking: 0.02em;

  --fs-xs:   clamp(0.75rem, 0.72rem + 0.12vw, 0.8125rem);
  --fs-sm:   clamp(0.875rem, 0.85rem + 0.12vw, 0.9375rem);
  --fs-base: clamp(1rem, 0.96rem + 0.18vw, 1.125rem);
  --fs-lg:   clamp(1.25rem, 1.15rem + 0.45vw, 1.5rem);
  --fs-xl:   clamp(1.75rem, 1.5rem + 1.1vw, 2.5rem);
  --fs-2xl:  clamp(2.6rem, 2rem + 2.6vw, 4.5rem);
  --fs-hero: clamp(3.4rem, 1.9rem + 6.5vw, 9rem);

  --lh-tight: 0.95;
  --lh-snug:  1.2;
  --lh-body:  1.65;
  --tracking-label: 0.12em;

  /* ---- Space (8pt rhythm) ---- */
  --s-1: 0.25rem;  --s-2: 0.5rem;  --s-3: 0.75rem; --s-4: 1rem;
  --s-5: 1.5rem;   --s-6: 2rem;    --s-7: 3rem;    --s-8: 4rem;
  --s-9: 6rem;     --s-10: 9rem;
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 3rem);
  --max-w: 80rem;
  --measure: 64ch;

  /* ---- Shape ---- */
  --radius-sm: 0;
  --radius: 0;
  --rule-w: 1px;

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 150ms;
  --dur: 280ms;
  --dur-slow: 700ms;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur: 0ms; --dur-slow: 0ms; }
}