/* ==========================================================================
   zacmorgan.co · Brand tokens · After Hours
   --------------------------------------------------------------------------
   Fonts (Google Fonts, all SIL Open Font License):
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Anton&family=Pinyon+Script&family=Space+Mono:wght@400;700&family=Inter+Tight:wght@400;500;600&display=swap" rel="stylesheet">
   ========================================================================== */

:root {
  /* ---- Palette ---------------------------------------------------------- */
  --zm-roast:    #1E1613;  /* deep ground, primary ink on light */
  --zm-espresso: #3A2D26;  /* panels, secondary ground */
  --zm-oxblood:  #4A1A14;  /* depth, feature panels */
  --zm-cream:    #EDE4D6;  /* type and rules on dark, light ground */
  --zm-paper:    #F6F0E6;  /* lightest ground, long reading */
  --zm-kraft:    #B9A58A;  /* script, codes, captions on dark */
  --zm-brass:    #B08A57;  /* hardware details only */
  --zm-signal:   #D2381F;  /* THE red square. One per layout. Never text. */

  /* ---- Semantic color --------------------------------------------------- */
  --color-bg:          var(--zm-roast);
  --color-surface:     var(--zm-espresso);
  --color-feature:     var(--zm-oxblood);
  --color-text:        var(--zm-cream);
  --color-text-muted:  var(--zm-kraft);
  --color-rule:        var(--zm-cream);
  --color-accent:      var(--zm-signal);

  /* light mode / light sections */
  --color-bg-light:    var(--zm-cream);
  --color-text-light:  var(--zm-roast);
  --color-muted-light: var(--zm-espresso);

  /* ---- Type families ---------------------------------------------------- */
  --font-display: "Anton", "Impact", "Arial Narrow", sans-serif;     /* headlines, always caps */
  --font-script:  "Pinyon Script", "Snell Roundhand", cursive;       /* one word per layout */
  --font-mono:    "Space Mono", ui-monospace, "SF Mono", monospace;  /* codes, labels, nav, buttons */
  --font-body:    "Inter Tight", system-ui, -apple-system, sans-serif;

  /* ---- Type scale (fluid) ----------------------------------------------- */
  --text-hero:    clamp(56px, 11vw, 168px);
  --text-display: clamp(44px, 7vw, 96px);
  --text-h2:      clamp(32px, 4.5vw, 56px);
  --text-h3:      clamp(24px, 2.6vw, 32px);
  --text-lead:    clamp(18px, 1.6vw, 21px);
  --text-body:    17px;
  --text-small:   15px;
  --text-code:    12px;

  --leading-display: .86;
  --leading-body:    1.6;
  --tracking-code:   .12em;  /* Space Mono caps */
  --tracking-wide:   .4em;   /* small caps above a headline */

  /* ---- Spacing (4px base) ----------------------------------------------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;
  --gutter:   clamp(16px, 4vw, 56px);
  --section:  clamp(64px, 9vw, 120px);
  --max-width: 1240px;

  /* ---- Rules, shape, texture -------------------------------------------- */
  --rule:        3px;   /* the system line weight. Boxes, labels, nav cells */
  --rule-thin:   1px;
  --radius:      0;     /* square corners everywhere */
  --radius-tag:  4px;   /* physical tags only */
  --grain-opacity: .08;

  /* ---- Logo ------------------------------------------------------------- */
  --logo-clearspace: 0.25;  /* x the Z Block width, on every side */
  --logo-min-monogram: 16px;
  --logo-min-primary:  96px;  /* lockup width */
}

/* Light sections */
.zm-light {
  --color-bg: var(--color-bg-light);
  --color-text: var(--color-text-light);
  --color-text-muted: var(--color-muted-light);
  --color-rule: var(--zm-roast);
}

/* Film grain overlay. Add class="zm-grain" to <body> */
.zm-grain::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 100;
  opacity: var(--grain-opacity); mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.zm-light.zm-grain::after, .zm-light .zm-grain::after { mix-blend-mode: multiply; }

/* The signal square as a reusable element */
.zm-signal { display: inline-block; width: .8em; height: .8em; background: var(--zm-signal); vertical-align: baseline; }