/* Saikou design tokens. Every color, face, and effect value lives here.
   Never hardcode a hex anywhere else in the theme. Tune the whole look from this file. */
:root {
  /* ---- Palette (brief section 7) ---- */
  --ink:     #0B0B0C;   /* near-black */
  --paper:   #EDE7D8;   /* aged newsprint, never pure white */
  --red:     #E01B24;   /* Option red: fills, large type, rules */
  --red-text: #B0141B;  /* red for small text on paper (AA contrast) */
  --on-red:  #FFFFFF;   /* text on a red fill: paper only reaches 3.9:1, white 4.8:1 */
  --magenta: #FF2D78;   /* headline accent */
  --acid:    #F5E33D;   /* callouts: only on ink, or with an outline */
  --cyan:    #24D6E8;   /* VHS blue, OSD text */
  --tape:    #1B1F3B;   /* deep VCR blue */

  /* Supporting tones */
  --green:      #1D8F4B;
  --green-dark: #0F5C2F;
  --amber:      #B57500;
  --amber-dark: #7A4F00;
  --grey:       #6B6B70;
  --paper-dim:  #DDD6C3;   /* rules and zebra rows on paper */
  --paper-dark: #C9C1AB;
  --ink-soft:   #1A1A1D;   /* card surfaces on ink */
  --white:      #FFFFFF;   /* lightbox controls only */

  /* Derived */
  --stamp-shadow:  rgba(11, 11, 12, 0.35);
  --cyan-glow:     rgba(36, 214, 232, 0.55);
  --ink-veil:      rgba(11, 11, 12, 0.55);
  --paper-veil:    rgba(237, 231, 216, 0.92);
  --red-veil:      rgba(224, 27, 36, 0.85);
  --scan-color:    rgba(255, 255, 255, 1);
  --halftone-dot:  rgba(11, 11, 12, 1);

  /* ---- Type ---- */
  --font-headline: "Anton", "Archivo Black", Impact, "Arial Narrow Bold", sans-serif;
  --font-jp:       "Noto Sans JP", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
  --font-mono:     "JetBrains Mono", "Space Mono", ui-monospace, Menlo, Consolas, monospace;
  --font-osd:      "VT323", "VCR OSD Mono", ui-monospace, monospace;
  --font-body:     "IBM Plex Sans", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-xs:   0.75rem;
  --fs-sm:   0.875rem;
  --fs-md:   1rem;
  --fs-lg:   1.25rem;
  --fs-xl:   clamp(1.75rem, 4vw, 2.5rem);
  --fs-2xl:  clamp(2.5rem, 7vw, 4.5rem);
  --fs-3xl:  clamp(3rem, 10vw, 7rem);

  /* ---- Print artifacts ---- */
  --skew:             -8deg;
  --misreg-offset:    1.5px;
  --outline-width:    0.045em;     /* headline stroke, paint-order: stroke fill */
  --halftone-size:    4px;
  --halftone-opacity: 0.035;
  --grain-opacity:    0.07;
  --grain-tile:       url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  /* White noise for VHS static on dark/photo surfaces (the grain tile above is black noise for paper) */
  --static-tile:      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  --sticker-rotate:   -2deg;
  --rule-width:       3px;
  --rule:             var(--rule-width) solid var(--ink);
  --rule-thin:        1px solid var(--ink);
  --shadow-hard:      4px 4px 0 var(--ink);
  --shadow-hard-sm:   2px 2px 0 var(--ink);

  /* ---- VHS chrome ---- */
  --scanline-size:    2px;
  --scanline-opacity: 0.04;
  --vignette:         radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, 0.45) 100%);
  --rec-blink:        1.2s;
  --tracking-duration: 400ms;
  --rgb-split:        1px;
  --card-tracking-duration: 2.6s;   /* one sweep of the VHS tracking band on card hover */
  --card-tracking-opacity:  0.5;
  --card-static-opacity:    0.16;
  --card-jitter:            3px;    /* horizontal jitter of the photo on card hover */
  --card-jitter-duration:   0.9s;

  /* ---- Stamps ---- */
  --stamp-rotate:      -6deg;
  --stamp-rotate-sold: -15deg;
  --stamp-opacity:     0.92;
  --stamp-border:      3px;

  /* ---- Layout ---- */
  --max-w:      1280px;
  --gutter:     clamp(14px, 3vw, 32px);
  --space-1:    0.25rem;
  --space-2:    0.5rem;
  --space-3:    1rem;
  --space-4:    1.5rem;
  --space-5:    2.5rem;
  --space-6:    4rem;
  --sidebar-w:  260px;
  --card-ratio: 3 / 2;
  --masthead-h: 64px;
}