/* ============================================================
   MILLWRIGHT & CO — WEB DESIGN TOKENS  v4 (June 2026)
   Source of truth: Millwright_Co_Brand_Bible.md §0 (two-layer system)
                  + §6 Round 8 canonical update (antique engraving)
                  + Millwright_Co_Color_Palette.md
   v2 change: gradient flag bar retired. The three pop colors never blend.
   v3 change: registration ticks retired — breaker became sunshine bar.
   v4 change (Round 8, 2026-06-11):
     - Wordmark font: Playfair Display 900 ("Millwright & Co", roman
       ampersand ~78% size, no period after Co, always typeset).
     - Stamp ring text: Playfair Display Black, dots at 9 & 3 o'clock,
       "EST. MMXXVI" on the bottom arc.
     - SUNSHINE DEMOTED TO TERTIARY. Hibiscus + cyan do the heavy
       lifting; sunshine only for rare highlighter-swipe moments.
     - Structural elements (breakers, dividers) move to the FOUNDATION
       palette: .mw-breaker is now an oak rule, not a sunshine bar.
     - Icon library locked at two (windmill cross-section, aerial screw)
       in antique engraving style; minimalist line-art marks are interim
       fallbacks only.
   Drop this file into any web project and use the variables/utilities.
   ============================================================ */

/* ---- Fonts (Brand Bible Layer 1 + §6 Round 8, locked) ----
   Wordmark: Playfair Display 900 (heavy display serif)
   Headlines: Inter Black (heavy geometric sans, letterpress)
   Long-form body: EB Garamond (humanist serif; Cardo as alternate)   */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@800;900&family=Inter:wght@400;500;600;700;800;900&family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Cardo:ital,wght@0,400;0,700;1,400&display=swap');

:root {
  /* ==================== LAYER 1 — FOUNDATION (90% of every surface) */

  /* Muji handcraft paper: warm off-white, low chroma */
  --mw-paper:        #F2EFE7;  /* primary surface */
  --mw-paper-warm:   #EAE6DA;  /* cards, secondary zones */
  --mw-paper-shade:  #DAD3C4;  /* edges, wells, dividers */

  /* Inks — never pure black */
  --mw-ink:          #2D2B27;  /* headlines, warm charcoal */
  --mw-ink-sepia:    #3B3833;  /* serif body text */
  --mw-ink-mid:      #6A655C;  /* secondary text, captions */
  --mw-ink-light:    #9C968A;  /* tertiary, metadata */
  --mw-oak:          #6E6356;  /* headings, muted accent */
  --mw-millstone:    #C3BCAE;  /* borders, rules, fine print */
  --mw-quill:        #CFC7B5;  /* background washes */

  /* ==================== LAYER 2 — POP (≤10%, highlights only)
     Never a background. Never text (except large display, Hibiscus only). */
  --mw-hibiscus:     #FF1F4D;  /* hot / read-me / important */
  --mw-cyan:         #00DFFF;  /* cool / calm / information (≤5% of surface) */
  --mw-sunshine:     #FFE45C;  /* highlight / attention / joy */

  /* Opacity ladder: solid 100 / translucent 60 / wash 25 / whisper 10 */
  --mw-hibiscus-translucent: #FF1F4D99;
  --mw-hibiscus-wash:        #FF1F4D40;
  --mw-hibiscus-whisper:     #FF1F4D1A;
  --mw-cyan-translucent:     #00DFFF99;
  --mw-cyan-wash:            #00DFFF40;
  --mw-cyan-whisper:         #00DFFF1A;
  --mw-sunshine-translucent: #FFE45C99;
  --mw-sunshine-wash:        #FFE45C40;
  --mw-sunshine-whisper:     #FFE45C1A;

  /* Gradient retired (June 2026). The three colors never blend.
     Registration ticks also retired — the breaker is sunshine only (.mw-breaker). */

  /* ==================== TYPE */
  --mw-font-wordmark: 'Playfair Display', Georgia, serif; /* weight 900, wordmark + stamp ring */
  --mw-font-display: 'Inter', system-ui, sans-serif;      /* weight 900 */
  --mw-font-serif:   'EB Garamond', 'Cardo', Georgia, serif;
  --mw-font-ui:      'Inter', system-ui, sans-serif;
}

/* ============================================================
   UTILITIES
   ============================================================ */

/* Base page — the brand default state */
.mw-page {
  background-color: var(--mw-paper);
  color: var(--mw-ink-sepia);
  font-family: var(--mw-font-serif);
}

/* Cotton paper texture (from the letterpress example).
   Apply to any surface that should feel like the brand's paper. */
.mw-paper-texture {
  position: relative;
  background-color: var(--mw-paper);
  background-image:
    radial-gradient(circle at 15% 25%, rgba(140, 100, 60, 0.06) 0%, transparent 50%),
    radial-gradient(circle at 85% 75%, rgba(140, 100, 60, 0.05) 0%, transparent 55%),
    radial-gradient(circle at 50% 50%, rgba(255, 250, 240, 0.3) 0%, transparent 70%);
  overflow: hidden;
}
.mw-paper-texture::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.42  0 0 0 0 0.32  0 0 0 0 0.22  0 0 0 0.18 0'/></filter><rect width='400' height='400' filter='url(%23n)' opacity='0.65'/></svg>");
  mix-blend-mode: multiply;
  pointer-events: none;
  opacity: 0.55;
}
.mw-paper-texture::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 50%, rgba(60, 40, 25, 0.07) 100%);
  pointer-events: none;
}

/* Letterpress / debossed type (final embossed treatment) */
.mw-deboss { color: var(--mw-ink); }
.mw-deboss-strong { color: var(--mw-ink); }

/* Headline — heavy geometric sans, letterpress */
.mw-headline {
  font-family: var(--mw-font-display);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

/* The section breaker — a Foundation oak rule, centered.
   (Round 8: structural elements live in the Foundation palette;
   the sunshine bar is retired from structural use.) */
.mw-breaker {
  width: 56px;
  height: 3px;
  background: var(--mw-oak);
}

/* Sunshine highlighter swipe (translucent, like a real highlighter) */
.mw-highlight {
  background: linear-gradient(transparent 58%, rgba(255, 228, 92, 0.85) 58%, rgba(255, 228, 92, 0.85) 92%, transparent 92%);
}

/* Hibiscus underline — "this matters" */
.mw-underline-hot {
  border-bottom: 3px solid var(--mw-hibiscus);
  padding-bottom: 2px;
}

/* Cyan info chip — small, discrete, loud */
.mw-chip-info {
  display: inline-block;
  background: var(--mw-cyan);
  color: var(--mw-ink-sepia);
  font-family: var(--mw-font-ui);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  padding: 3px 10px;
  border-radius: 999px;
}

/* ============================================================
   RULES OF USE (from the Brand Bible — keep these or it stops
   being Millwright & Co):
   1. Layer 1 is 90%+ of any web surface (~70% for dense app UI).
   2. Pop colors are punctuation: 1–2 accents per view. Never backgrounds.
      Hierarchy: hibiscus & cyan do the heavy lifting; SUNSHINE IS
      TERTIARY — rare highlighter swipes only.
   3. Cyan & Sunshine are decorative only — never text (contrast fails).
   4. Body text: sepia serif. Headlines: Inter 900 debossed ink.
      Wordmark & stamp ring: Playfair Display 900 (roman ampersand
      ~78% size, "Co" without period, always typeset — never AI text).
   5. No gradients, ever. No three-color rows/banners. Structural
      elements (breakers, dividers) stay in the FOUNDATION palette —
      oak rules or sepia ornaments (.mw-breaker is an oak rule).
   6. Stamp icons (windmill cross-section / aerial screw) render in
      antique scientific-engraving style — multi-tone sepia, parchment
      inside the illustration only. Minimalist marks = interim fallback.
   ============================================================ */