/* ============================================================================
   THE BURNER UNPRINCIPLES — colors_and_type.css
   "The Sacred Bureaucracy" — official-decree aesthetic for satirical content.
   Import this file to inherit the full type + color foundation.
   ============================================================================ */

/* ---- Webfonts (Google Fonts CDN) -----------------------------------------
   Libre Caslon       — the typeface of constitutions & proclamations (sacred text)
   JetBrains Mono      — the fine-print / terms-and-conditions / bureaucratic voice
   Saira Stencil One   — rubber-stamp seals & official stamps (use SPARINGLY)
   Caveat              — the cynic's handwritten margin scrawl (Exposé direction)
   If you need offline TTFs, download these families and drop them in /fonts.
--------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Libre+Caslon+Display&family=Libre+Caslon+Text:ital,wght@0,400;0,700;1,400&family=JetBrains+Mono:ital,wght@0,400;0,500;0,700;1,400&family=Saira+Stencil+One&family=Caveat:wght@500;700&display=swap');

:root {
  /* ===== CORE PALETTE — the Black Rock playa ============================ */
  --bone:        #EDE4D0;   /* aged paper / primary light background        */
  --bone-2:      #E3D8BF;   /* deeper sand, panels on bone                  */
  --dust:        #CDBE9F;   /* alkali dust, dividers, muted fills           */
  --ink:         #1C1813;   /* warm charcoal — primary text / "ink"         */
  --ink-soft:    #4A4035;   /* secondary ink                                */
  --sand-text:   #8A7B5E;   /* tertiary / fine-print muted text             */
  --ember:       #C2511E;   /* burnt-orange — the one true accent           */
  --ember-deep:  #97370F;   /* pressed / hover ember                        */
  --stamp-red:   #9B2D20;   /* oxidized rubber-stamp red                    */
  --stamp-red-2: #B7392A;
  --night:       #14110C;   /* desert-night — dark sections / inverse bg    */
  --night-2:     #211B12;   /* raised panels on night                       */
  --ash:         #C9BFA8;   /* light text on night                          */

  /* ===== SEMANTIC SURFACES ============================================= */
  --bg:          var(--bone);
  --bg-panel:    var(--bone-2);
  --fg1:         var(--ink);       /* primary foreground                    */
  --fg2:         var(--ink-soft);  /* secondary foreground                  */
  --fg3:         var(--sand-text); /* tertiary / captions / fine print      */
  --accent:      var(--ember);
  --rule:        #B9A87F;          /* hairline rules / borders              */
  --rule-strong: var(--ink);

  /* ===== TYPE FAMILIES ================================================= */
  --serif-display: 'Libre Caslon Display', 'Times New Roman', serif;
  --serif-text:    'Libre Caslon Text', Georgia, serif;
  --mono:          'JetBrains Mono', ui-monospace, 'Courier New', monospace;
  --stencil:       'Saira Stencil One', 'Arial Black', sans-serif;
  --hand:          'Caveat', 'Comic Sans MS', cursive;  /* margin scrawl / annotation */

  /* ===== TYPE SCALE (semantic) ======================================== */
  /* Display proclamation */
  --t-hero-size:   clamp(3.5rem, 9vw, 8rem);
  --t-hero-lh:     0.94;
  /* Section / principle title */
  --t-h1-size:     clamp(2.25rem, 4.5vw, 3.75rem);
  --t-h1-lh:       1.0;
  --t-h2-size:     1.75rem;
  --t-h2-lh:       1.1;
  /* Earnest opening clause (the "law") */
  --t-clause-size: 1.35rem;
  --t-clause-lh:   1.45;
  /* Body */
  --t-body-size:   1.0625rem;
  --t-body-lh:     1.6;
  /* Fine print / caveats */
  --t-fine-size:   0.8125rem;
  --t-fine-lh:     1.65;
  /* Label / stamp / eyebrow */
  --t-label-size:  0.6875rem;
  --t-label-track: 0.22em;

  /* ===== SPACING (4px base, playa-generous) =========================== */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
  --sp-9: 96px; --sp-10: 128px;

  /* ===== RADII — documents are flat & square ========================== */
  --r-none: 0px;     /* default — paper has corners, not curves            */
  --r-sm:   2px;     /* stamps / chips, barely                             */
  --r-seal: 50%;     /* circular seals only                                */

  /* ===== ELEVATION — letterpress, not drop-shadow ===================== */
  /* Documents sit FLAT. "Elevation" is an offset ink-block, not a blur.   */
  --press:    3px 3px 0 0 var(--ink);          /* hard letterpress offset  */
  --press-sm: 2px 2px 0 0 var(--ink);
  --press-ember: 4px 4px 0 0 var(--ember);
  --lift:     0 1px 0 0 var(--rule);           /* hairline seam            */
}

/* ============================================================================
   SEMANTIC TYPE CLASSES
   ============================================================================ */
.u-hero {
  font-family: var(--serif-display);
  font-size: var(--t-hero-size);
  line-height: var(--t-hero-lh);
  color: var(--fg1);
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.u-h1 {
  font-family: var(--serif-display);
  font-size: var(--t-h1-size);
  line-height: var(--t-h1-lh);
  color: var(--fg1);
  text-wrap: balance;
}
.u-h2 {
  font-family: var(--serif-text);
  font-weight: 700;
  font-size: var(--t-h2-size);
  line-height: var(--t-h2-lh);
  color: var(--fg1);
}
.u-clause {
  font-family: var(--serif-text);
  font-size: var(--t-clause-size);
  line-height: var(--t-clause-lh);
  color: var(--fg1);
  text-wrap: pretty;
}
.u-clause-i { font-style: italic; }
.u-body {
  font-family: var(--serif-text);
  font-size: var(--t-body-size);
  line-height: var(--t-body-lh);
  color: var(--fg2);
  text-wrap: pretty;
}
/* The CAVEAT — mono, the sound of fine print being added after the fact */
.u-fine {
  font-family: var(--mono);
  font-size: var(--t-fine-size);
  line-height: var(--t-fine-lh);
  color: var(--fg3);
  text-wrap: pretty;
}
.u-label {
  font-family: var(--mono);
  font-weight: 500;
  font-size: var(--t-label-size);
  letter-spacing: var(--t-label-track);
  text-transform: uppercase;
  color: var(--fg2);
}
.u-stamp {
  font-family: var(--stencil);
  text-transform: uppercase;
  color: var(--stamp-red);
  letter-spacing: 0.02em;
}
.u-numeral {
  font-family: var(--serif-display);
  font-variant-numeric: lining-nums;
  color: var(--accent);
}

/* ============================================================================
   PRIMITIVES used across previews & kits
   ============================================================================ */
.rule        { border: none; border-top: 1px solid var(--rule); }
.rule-double { border: none; border-top: 3px double var(--rule-strong); }
.rule-ink    { border: none; border-top: 1.5px solid var(--ink); }

/* Footnote dagger / asterisk markers */
.u-dagger { color: var(--ember); font-family: var(--serif-text); }

/* ============================================================================
   ANNOTATION LAYER (Marked-Up Exposé — the canonical direction)
   The sacred document, defaced by a cynic. See README · Visual Foundations.
   ============================================================================ */
/* handwritten margin scrawl — the cynic's translation */
.u-scrawl {
  font-family: var(--hand); font-weight: 700; font-size: 1.35rem; line-height: 1.15;
  color: var(--ember); transform: rotate(-3deg); display: inline-block;
}
/* highlighter swipe — drag a marker across the damning part */
.u-mark {
  background: linear-gradient(transparent 14%,
    color-mix(in srgb, var(--ember) 34%, transparent) 14% 88%, transparent 88%);
  -webkit-box-decoration-break: clone; box-decoration-break: clone; color: var(--ink);
}
/* annotated underline — wavy, as if scribbled under the official wording */
.u-wavy {
  text-decoration: underline wavy color-mix(in srgb, var(--ember) 70%, transparent);
  text-decoration-thickness: 1.5px; text-underline-offset: 4px;
}