/* =====================================================================
 * There's Nothing To Do In Medicine Hat — Design Tokens
 * Newsprint palette, heavy type, hard corners. See README.md.
 * ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400..900&family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500;700&display=swap');

:root {
  /* ---- Color: Base palette --------------------------------------- */
  --paper:        #F5F3EC;   /* clean warm-neutral, less yellow     */
  --paper-deep:   #E9E5DA;   /* one shade darker — section bands    */
  --paper-light:  #FAF9F3;   /* one shade lighter — inset cards     */
  --ink:          #15140F;   /* deep almost-black, green undertone  */
  --ink-soft:     #2A2820;   /* secondary text                      */
  --ink-mute:     #6E6A5A;   /* tertiary, captions                  */
  --ink-faint:    #B5AE9A;   /* dividers, placeholders              */

  --signal:       #E63327;   /* THE accent. Strike, CTA, alert.     */
  --signal-deep:  #B82218;   /* pressed signal                      */
  --hat:          #F2A03D;   /* Hat Orange — secondary highlight    */
  --hat-deep:     #C77B1F;
  --cold:         #1C4DDB;   /* Cold Blue — links, tertiary         */
  --cold-deep:    #0F36A8;

  /* ---- Color: Semantic ------------------------------------------- */
  --bg:           var(--paper);
  --bg-alt:       var(--paper-deep);
  --bg-inset:     var(--paper-light);
  --fg:           var(--ink);
  --fg-1:         var(--ink);
  --fg-2:         var(--ink-soft);
  --fg-3:         var(--ink-mute);
  --fg-4:         var(--ink-faint);
  --border:       var(--ink);
  --border-soft:  var(--ink-faint);
  --link:         var(--cold);
  --link-hover:   var(--signal);
  --accent:       var(--signal);
  --accent-2:     var(--hat);

  --success:      #2E7D43;   /* "Saved" stamp green — used rarely   */
  --warning:      var(--hat);
  --danger:       var(--signal);

  /* ---- Type: Families -------------------------------------------- */
  --font-display: 'Bricolage Grotesque', 'Archivo Black', 'Inter', system-ui, sans-serif;
  --font-body:    'Geist', system-ui, -apple-system, sans-serif;
  --font-mono:    'Geist Mono', ui-monospace, 'Menlo', monospace;

  /* ---- Type: Scale (px @ root 16) -------------------------------- */
  --text-2xs:     11px;
  --text-xs:      12px;
  --text-sm:      14px;
  --text-base:    16px;
  --text-md:      18px;
  --text-lg:      22px;
  --text-xl:      28px;
  --text-2xl:     38px;
  --text-3xl:     56px;
  --text-4xl:     84px;
  --text-5xl:     128px;
  --text-6xl:     200px;

  /* ---- Type: Weight ---------------------------------------------- */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* ---- Type: Leading / tracking ---------------------------------- */
  --leading-tight:   0.92;
  --leading-snug:    1.1;
  --leading-normal:  1.45;
  --leading-loose:   1.65;
  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.08em;   /* eyebrows, stamps                  */
  --tracking-stamp:  0.14em;

  /* ---- Spacing (4px base) ---------------------------------------- */
  --s-0:   0px;
  --s-1:   4px;
  --s-2:   8px;
  --s-3:   12px;
  --s-4:   16px;
  --s-5:   20px;
  --s-6:   24px;
  --s-8:   32px;
  --s-10:  40px;
  --s-12:  48px;
  --s-16:  64px;
  --s-20:  80px;
  --s-24:  96px;
  --s-32: 128px;

  /* ---- Radii ----------------------------------------------------- */
  --r-0:    0px;       /* cards, containers, heroes — default       */
  --r-1:    2px;       /* buttons, inputs, chips                    */
  --r-pill: 9999px;    /* stamp badges only                         */

  /* ---- Borders --------------------------------------------------- */
  --bw:     1px;       /* default newsprint hairline                */
  --bw-2:   2px;       /* icon stroke, emphasis                     */
  --bw-3:   3px;       /* stamp outlines                            */

  /* ---- Shadows (offset only — no soft shadows in this brand) ---- */
  --shadow-stamp:  4px 4px 0 var(--ink);
  --shadow-stamp-sm: 2px 2px 0 var(--ink);
  --shadow-stamp-red: 4px 4px 0 var(--signal);
  /* No --shadow-soft. On purpose. Don't add one. */

  /* ---- Motion ---------------------------------------------------- */
  --dur-fast:  80ms;
  --dur-base: 160ms;
  --dur-slow: 220ms;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-stamp: cubic-bezier(0.34, 1.6, 0.6, 1);  /* the stamp settle */

  /* ---- Layout ---------------------------------------------------- */
  --max-w-prose:    640px;
  --max-w-content:  1120px;
  --max-w-wide:     1400px;
}

/* =====================================================================
 * Semantic element styles — opt-in via class
 * ===================================================================== */

/* Headlines — display, heavy, modern grotesque (Bricolage Black) */
.h-display {
  font-family: var(--font-display);
  font-weight: 800;
  font-size:   var(--text-5xl);
  line-height: var(--leading-tight);
  letter-spacing: -0.045em;
  color: var(--fg-1);
  text-transform: none;
}
.h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size:   var(--text-4xl);
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: var(--fg-1);
}
.h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size:   var(--text-3xl);
  line-height: 1.0;
  letter-spacing: -0.035em;
  color: var(--fg-1);
}
.h3 {
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  font-size:   var(--text-xl);
  line-height: 1.2;
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}
.h4 {
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size:   var(--text-md);
  line-height: 1.3;
  color: var(--fg-1);
}

/* Body */
.p, .body {
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size:   var(--text-base);
  line-height: var(--leading-normal);
  color: var(--fg-2);
}
.p-sm, .body-sm {
  font-family: var(--font-body);
  font-size:   var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--fg-2);
}
.p-lg, .lede {
  font-family: var(--font-body);
  font-size:   var(--text-lg);
  line-height: 1.4;
  color: var(--fg-1);
}

/* Eyebrows — mono caps, the "official document" voice */
.eyebrow {
  font-family: var(--font-mono);
  font-weight: var(--weight-medium);
  font-size:   var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-2);
}

/* Stamp — mono caps, wider tracking */
.stamp {
  font-family: var(--font-mono);
  font-weight: var(--weight-bold);
  font-size:   var(--text-xs);
  letter-spacing: var(--tracking-stamp);
  text-transform: uppercase;
  color: var(--ink);
}

/* Code / numeric */
.mono, code {
  font-family: var(--font-mono);
  font-size:   var(--text-sm);
}

/* Links */
.link, a.link {
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease-out);
}
.link:hover { color: var(--link-hover); }

/* The signature gesture: strike-through "Nothing".
   Centered via translateY(-50%) so it works reliably across line-heights. */
.strike {
  position: relative;
  display: inline-block;
}
.strike::after {
  content: '';
  position: absolute;
  left: -3%; right: -3%;
  top: 50%;
  height: 0.13em;
  background: var(--signal);
  transform: translateY(-50%) rotate(-2.5deg);
  border-radius: 6px;
  pointer-events: none;
}