/* ==========================================================================
   ANNEX HOUSE — colors_and_type.css
   The base tokens. Everything else builds on these.
   ========================================================================== */

/* ---- Fonts ---------------------------------------------------------------- */

@font-face {
  font-family: "Space Mono";
  src: url("fonts/SpaceMono-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Space Mono";
  src: url("fonts/SpaceMono-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Space Mono";
  src: url("fonts/SpaceMono-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Space Mono";
  src: url("fonts/SpaceMono-BoldItalic.ttf") format("truetype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ---- Color: ink + paper (the workhorses) ------------------------------ */
  --ah-ink:        #000000;   /* pure black — primary text, logo, stamps      */
  --ah-paper:      #f5f1ea;   /* off-white — default page background          */
  --ah-paper-2:    #ece6da;   /* one step warmer, for layered panels          */
  --ah-white:      #ffffff;   /* hard white — highlight blocks, cards         */

  /* ---- Color: kraft + stamp (the textural side) ------------------------- */
  --ah-kraft:      #b08555;   /* kraft cardboard mid-tone                     */
  --ah-kraft-2:    #9a7448;   /* kraft, deeper                                */
  --ah-kraft-ink:  #2a2421;   /* the muddy black of a rubber stamp on kraft   */

  /* ---- Color: link blue (the retro web tell) ---------------------------- */
  --ah-link:       #1a18ff;   /* classic hyperlink blue. underlined. always.  */
  --ah-link-visited:#5a189a;

  /* ---- Color: accent (pulled from the film photography) ----------------- */
  --ah-gold:       #c8923e;   /* the gold silk jacket                         */
  --ah-rust:       #8a3a1c;   /* the corrugated metal door / dusk             */
  --ah-blood:      #6b1410;   /* deep red flower                              */
  --ah-leaf:       #2f3a1e;   /* the dark green of the leopard fabric         */

  /* ---- Foreground / background semantic ---------------------------------- */
  --ah-fg-1:       var(--ah-ink);             /* primary text                 */
  --ah-fg-2:       #1a1a1a;                   /* near-black, body             */
  --ah-fg-3:       #5a5a5a;                   /* muted, secondary             */
  --ah-fg-on-dark: var(--ah-paper);
  --ah-bg:         var(--ah-paper);
  --ah-bg-card:    var(--ah-white);
  --ah-bg-dark:    var(--ah-ink);
  --ah-rule:       #000000;                   /* hairlines are always black   */

  /* ---- Type: families --------------------------------------------------- */
  --ah-font-mono:  "Space Mono", ui-monospace, "Courier New", monospace;
  --ah-font-body:  "Space Mono", ui-monospace, "Courier New", monospace;
  --ah-font-display: "Space Mono", ui-monospace, "Courier New", monospace;
  /* Annex House is single-family by design. Italic + bold do the work that
     a serif/sans contrast usually does in other systems. */

  /* ---- Type: scale (clamped between mobile and desktop) ----------------- */
  --ah-step--1:    clamp(0.70rem, 0.65rem + 0.2vw, 0.78rem);    /* caption    */
  --ah-step-0:     clamp(0.82rem, 0.78rem + 0.2vw, 0.92rem);    /* body small */
  --ah-step-1:     clamp(0.95rem, 0.90rem + 0.3vw, 1.05rem);    /* body       */
  --ah-step-2:     clamp(1.10rem, 1.00rem + 0.5vw, 1.30rem);    /* lead       */
  --ah-step-3:     clamp(1.40rem, 1.20rem + 1.0vw, 1.80rem);    /* h3         */
  --ah-step-4:     clamp(1.80rem, 1.40rem + 2.0vw, 2.60rem);    /* h2         */
  --ah-step-5:     clamp(2.40rem, 1.80rem + 3.5vw, 4.20rem);    /* h1         */
  --ah-step-6:     clamp(3.20rem, 2.20rem + 6.0vw, 7.00rem);    /* hero       */

  /* ---- Type: weight + tracking ----------------------------------------- */
  --ah-weight-reg:   400;
  --ah-weight-bold:  700;
  --ah-track-tight:  -0.01em;
  --ah-track-normal: 0;
  --ah-track-wide:   0.04em;
  --ah-track-x-wide: 0.12em;     /* tags, labels, ALL-CAPS UI                 */
  --ah-leading-tight: 1.05;
  --ah-leading-snug:  1.20;
  --ah-leading-body:  1.45;

  /* ---- Spacing (8-based, with a half-step for tight UI) ----------------- */
  --ah-space-0:   0;
  --ah-space-1:   4px;
  --ah-space-2:   8px;
  --ah-space-3:   12px;
  --ah-space-4:   16px;
  --ah-space-5:   24px;
  --ah-space-6:   32px;
  --ah-space-7:   48px;
  --ah-space-8:   64px;
  --ah-space-9:   96px;
  --ah-space-10:  128px;

  /* ---- Radii — almost always 0. Annex House is a square corners brand. - */
  --ah-radius-0:  0;
  --ah-radius-1:  2px;          /* the most we'll ever round.                 */

  /* ---- Borders ---------------------------------------------------------- */
  --ah-border-hair: 1px solid var(--ah-rule);
  --ah-border-1:    1.5px solid var(--ah-rule);
  --ah-border-2:    3px solid var(--ah-rule);

  /* ---- Shadows — we don't really do shadows. Keep them flat. ----------- */
  --ah-shadow-0:    none;
  --ah-shadow-1:    0 1px 0 rgba(0,0,0,0.15);     /* a single pixel of weight */
  --ah-shadow-flash:                              /* press/photo-flash halo   */
                    0 0 0 1px rgba(0,0,0,0.8),
                    0 0 24px 4px rgba(255,255,255,0.35);

  /* ---- Motion ----------------------------------------------------------- */
  --ah-ease:       cubic-bezier(.2,.7,.2,1);
  --ah-dur-fast:   120ms;
  --ah-dur:        180ms;
  --ah-dur-slow:   320ms;

  /* ---- Texture overlays (use as background blend) ---------------------- */
  --ah-grain-opacity: 0.07;
}

/* ==========================================================================
   Semantic element styles — minimal reset, then defaults
   ========================================================================== */

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ah-bg);
  color: var(--ah-fg-1);
  font-family: var(--ah-font-body);
  font-size: var(--ah-step-1);
  font-weight: var(--ah-weight-reg);
  line-height: var(--ah-leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Headings — italic by default. Bold italic uppercase is the brand voice. */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--ah-font-display);
  font-weight: var(--ah-weight-bold);
  font-style: italic;
  line-height: var(--ah-leading-tight);
  letter-spacing: var(--ah-track-tight);
  margin: 0 0 var(--ah-space-4);
  text-transform: uppercase;
}
h1 { font-size: var(--ah-step-5); }
h2 { font-size: var(--ah-step-4); }
h3 { font-size: var(--ah-step-3); letter-spacing: var(--ah-track-normal); }
h4 { font-size: var(--ah-step-2); letter-spacing: var(--ah-track-normal); }
h5 { font-size: var(--ah-step-1); letter-spacing: var(--ah-track-wide); }
h6 { font-size: var(--ah-step-0); letter-spacing: var(--ah-track-x-wide); }

p {
  margin: 0 0 var(--ah-space-4);
  text-wrap: pretty;
  max-width: 64ch;
}

small, .ah-caption {
  font-size: var(--ah-step-0);
  letter-spacing: var(--ah-track-wide);
}

/* Links — classic web blue, underlined. Always. */
a, .ah-link {
  color: var(--ah-link);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  transition: opacity var(--ah-dur) var(--ah-ease);
}
a:hover, .ah-link:hover { opacity: 0.7; }
:where(a:visited) { color: var(--ah-link); } /* keep visited state the same as normal; zero specificity so class colors win */

/* Code / inline mono — already mono, so we use a tinted bg instead */
code, kbd, samp {
  font-family: var(--ah-font-mono);
  background: var(--ah-paper-2);
  padding: 0.05em 0.35em;
  border: var(--ah-border-hair);
}

hr {
  border: 0;
  border-top: var(--ah-border-hair);
  margin: var(--ah-space-6) 0;
}

::selection {
  background: var(--ah-ink);
  color: var(--ah-paper);
}

/* ==========================================================================
   Brand utility classes — the moves that show up on every page
   ========================================================================== */

/* The signature: white-highlight inline text block, like newsprint cut-outs */
.ah-highlight,
.ah-hl {
  background: var(--ah-white);
  color: var(--ah-ink);
  padding: 0.15em 0.4em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* The inverse: black-highlight on light backgrounds */
.ah-highlight--ink {
  background: var(--ah-ink);
  color: var(--ah-paper);
}

/* All-caps display lockup with optional symbol brackets */
.ah-lockup {
  font-weight: var(--ah-weight-bold);
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: var(--ah-track-wide);
}

/* Asterisk-bracketed callout: *VISIT US* / *NEW* / *MEMBERS ONLY* */
.ah-stamp::before { content: "*"; margin-right: 0.15em; }
.ah-stamp::after  { content: "*"; margin-left: 0.15em; }

/* Slash-separated meta line: TUES / WED / THU */
.ah-slashes > * + *::before { content: " / "; opacity: 0.6; }

/* Kraft-paper background. Drop on any container. */
.ah-bg-kraft {
  background-color: var(--ah-kraft);
  background-image: url("assets/texture-kraft.png");
  background-size: 240px 240px;
  background-repeat: repeat;
  color: var(--ah-kraft-ink);
}

/* Generic film-grain overlay. Apply on a ::before to any container. */
.ah-grain {
  position: relative;
  isolation: isolate;
}
.ah-grain::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.6;
  background-image: url("assets/texture-grain.png");
  background-size: 320px 320px;
  background-repeat: repeat;
}