/* Bulletin Rescue design tokens
   Direction: two-ink parish risograph. Federal-ish blue ink + sunflower ink on
   plain office paper, with the colored "bulletin stock" a church office buys by
   the ream. Shared by the website (site/) and the explainer clips, so both
   look printed by the same machine.

   Fonts (one request, Google Fonts):
   https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@100..112,800&family=Atkinson+Hyperlegible+Next:wght@400;700&family=Atkinson+Hyperlegible+Mono:wght@400;600&display=swap
*/

:root {
  /* ---------- Inks (the two drums) ---------- */
  --ink-blue: #2f52a0;          /* Ink 1. Riso Medium Blue family. Headlines, line art, buttons, solid fields. 6.6:1 on --paper */
  --ink-blue-deep: #1f3a7a;     /* Ink 1 at full coverage / hover. 9.5:1 on --paper */
  --ink-sun: #ffb511;           /* Ink 2. Riso Sunflower. Highlighter marks, search hits, fields, the tear-off card. Never text on paper */
  --ink-sun-soft: #ffd77a;      /* Ink 2 at ~55% screen: tints, table stripes */
  --overprint: #3d4a1e;         /* Blue printed over sunflower (multiply). Use only where the two inks overlap in art */

  /* ---------- Paper ---------- */
  --paper: #f7f7f3;             /* Plain 20 lb office paper. Neutral, not cream */
  --paper-bright: #ffffff;      /* Card/sheet stock that sits on top of --paper */
  --stock-blue: #dfe7f2;        /* Pastel blue bulletin stock: alternate sections */
  --stock-sun: #ffe7a8;         /* Goldenrod-light stock: the response card / form */

  /* ---------- Text ---------- */
  --text: #16203a;              /* Blue-black ink for body copy. 15.5:1 on --paper */
  --text-soft: #3b4663;         /* Secondary copy. 9:1 on --paper, 7.7:1 on --stock-blue */
  --text-on-blue: #ffffff;      /* Paper knocked out of a blue field. 7.2:1 on --ink-blue */
  --text-on-blue-soft: #dfe7f2; /* Secondary copy on blue. 5.8:1 */
  --rule: #16203a;              /* Printed rules and borders */
  --rule-soft: #b9c3d6;         /* Hairlines, dividers on stock */
  --focus: #ffb511;             /* Focus ring: sunflower, 3px, offset 3px, over a blue-black 1px inner line */

  /* ---------- Type ---------- */
  --font-display: "Archivo", "Arial Narrow", Arial, sans-serif; /* Wood-type gothic: wght 800, wdth 112 for headlines */
  --font-body: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", Verdana, sans-serif; /* Built by the Braille Institute for low-vision readers */
  --font-data: "Atkinson Hyperlegible Mono", ui-monospace, Menlo, monospace; /* File names, index rows, dates. Data only */

  --display-wdth: 112;          /* font-variation-settings "wdth" for display */
  --display-wght: 800;

  /* Fluid type scale. Body never below 18px. */
  --step--1: 1rem;                                    /* 16px: legal/footer only */
  --step-0: clamp(1.125rem, 1.08rem + 0.2vw, 1.25rem);/* 18 to 20px body */
  --step-1: clamp(1.3rem, 1.2rem + 0.45vw, 1.55rem);  /* lede, card titles */
  --step-2: clamp(1.6rem, 1.4rem + 0.9vw, 2.1rem);    /* h3 */
  --step-3: clamp(2rem, 1.6rem + 1.8vw, 3rem);        /* h2 */
  --step-4: clamp(2.5rem, 1.8rem + 3.4vw, 4.75rem);   /* h1 */
  --leading-body: 1.6;
  --leading-tight: 1.05;
  --measure: 38em;

  /* Clip captions (1080p frame): >= 44px, sentence case, --font-body 700, --text on --paper or --text-on-blue on --ink-blue */

  /* ---------- Space (8px base) ---------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --space-9: 7rem;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --max: 76rem;

  /* ---------- Shape ---------- */
  --radius-0: 0;                /* Fields, sections, sheets: printed edges are square */
  --radius-1: 3px;              /* Buttons, inputs: a trimmed corner, never a pill */
  --radius-2: 6px;              /* Video frames, index sheet */
  --rule-w: 2px;                /* Standard printed rule */
  --tap: 3.5rem;                /* 56px minimum tap target for buttons */
  --shadow-sheet: 0 1px 1px rgba(22, 32, 58, 0.08), 0 10px 24px -8px rgba(22, 32, 58, 0.22); /* Paper lifted off paper */

  /* ---------- Texture ---------- */
  /* 1. Riso grain: tiled SVG noise, multiplied over ink fields at 10-18% (never over body text blocks on paper). */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .09 0 0 0 0 .13 0 0 0 0 .23 0 0 0 1.1 -.35'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  /* 2. Halftone: dot screen for tints inside illustrations. background: var(--halftone) 0 0 / 7px 7px */
  --halftone: radial-gradient(circle at 50% 50%, var(--ink-blue) 0 1.3px, transparent 1.6px);
  /* 3. Misregistration: the sunflower layer of an illustration sits 3px right, 2px down of the blue layer. Art only; never on type or buttons. */
  --misreg-x: 3px;
  --misreg-y: 2px;

  /* ---------- Motion (site) ---------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-1: 160ms;
  --dur-2: 320ms;
}