/* ═══════════════════════════════════════════════════════════════
   puffer-brand.css · v2.0 · 2026-04-24
   Single source of truth for all Puffer Properties surfaces.
   Import this file; never re-declare these tokens inline.

   COLOUR PHILOSOPHY
   ─────────────────
   7 core colours. 3 text-safe ink partners. 2 neutrals.
   Every hue has a "fill" (for backgrounds, badges, markers)
   and an "ink" (for text that must pass WCAG AA on cream).
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,700;0,900;1,400&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600;9..40,700&family=Space+Mono:wght@400;700&display=swap');

:root {

  /* ── PALETTE: 7 CORE ── */
  --ink:          #1A1A1A;   /* Deep Ink — primary text, dark bg, KILL state     */
  --teal:         #2A7C6F;   /* Reef Teal — brand primary, CTAs, GO state        */
  --teal-light:   #3DA18F;   /* Teal Light — accent, hover, wordmark "PROPERTIES"*/
  --gold:         #C8A84B;   /* Treasure Gold — financial fills, ELEVATE state    */
  --coral:        #E85D3A;   /* Coral Pop — alerts only, NO-GO state             */
  --sand:         #E8DCC8;   /* Warm Sand — cards, secondary surfaces            */
  --cream:        #F5F0E8;   /* Sea Cream — page canvas                         */

  /* ── PALETTE: 3 TEXT-SAFE INK PARTNERS ── */
  /* Use these for readable text on cream; use the fills above for backgrounds. */
  --teal-ink:     #1A4A43;   /* AA on cream · 10.2:1  */
  --gold-ink:     #7A6418;   /* AA on cream · 5.8:1   */
  --coral-ink:    #A03616;   /* AA on cream · 5.5:1   */

  /* ── PALETTE: 2 TINTS ── */
  --teal-pale:    #D4EDE9;   /* Teal tint — info panels, tag backgrounds         */
  --sand-light:   #F0EAD8;   /* Sand tint — subtle card differentiation          */

  /* ── NEUTRALS ── */
  --mid:          #7A7269;   /* Secondary text, muted labels                     */
  --mid-soft:     #B9AFA2;   /* Disabled, placeholder, faint borders             */
  --hair:         #D9CFBF;   /* Dividers, card borders                          */
  --faint:        rgba(26,26,26,0.06); /* Overlay wash                          */

  /* ── DECISION SEMANTICS ── */
  --go:           var(--teal);
  --go-bg:        rgba(42,124,111,0.10);
  --go-border:    rgba(42,124,111,0.30);

  --elevate:      var(--gold);
  --elevate-text: var(--gold-ink);
  --elevate-bg:   rgba(200,168,75,0.12);
  --elevate-border: rgba(200,168,75,0.35);

  --nogo:         var(--coral);
  --nogo-text:    var(--coral-ink);
  --nogo-bg:      rgba(232,93,58,0.08);
  --nogo-border:  rgba(232,93,58,0.25);

  --kill:         var(--ink);
  --kill-bg:      var(--ink);
  --kill-text:    var(--cream);

  --disq:         #5C5045;
  --disq-bg:      rgba(122,114,105,0.12);
  --disq-border:  rgba(122,114,105,0.30);

  --stc:          var(--teal-light);

  /* ── TYPOGRAPHY ── */
  --f-display:    'Playfair Display', Georgia, 'Times New Roman', serif;
  --f-body:       'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --f-mono:       'Space Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ── TYPE SCALE ── */
  --text-hero:    clamp(3rem, 6vw, 5.5rem);    /* Playfair 900      */
  --text-h2:      clamp(2rem, 4vw, 3.2rem);     /* Playfair 900      */
  --text-h3:      1.3rem;                        /* Playfair 700      */
  --text-body-lg: 1.15rem;                       /* DM Sans 300       */
  --text-body:    1rem;                          /* DM Sans 400       */
  --text-small:   0.875rem;                      /* DM Sans 400       */
  --text-label:   0.7rem;                        /* Space Mono 400 UC */
  --text-micro:   0.62rem;                       /* Space Mono 400 UC */

  /* ── SPACING (4px base) ── */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* ── RADIUS ── */
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   16px;
  --r-xl:   20px;
  --r-pill: 999px;

  /* ── SHADOWS ── */
  --shadow-sm: 0 1px 3px rgba(26,26,26,0.06);
  --shadow-md: 0 4px 12px rgba(26,26,26,0.08);
  --shadow-lg: 0 8px 28px rgba(26,26,26,0.10);
}

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── BASE ── */
html, body {
  height: 100%;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ── TYPE HELPERS ── */
h1, h2, h3 { font-family: var(--f-display); }
h1 { font-size: var(--text-hero); font-weight: 900; line-height: 1.06; letter-spacing: -0.01em; }
h2 { font-size: var(--text-h2); font-weight: 900; line-height: 1.08; letter-spacing: -0.01em; }
h3 { font-size: var(--text-h3); font-weight: 700; line-height: 1.25; }

.label, .section-label {
  font-family: var(--f-mono);
  font-size: var(--text-label);
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--teal);
}

.data, .mono {
  font-family: var(--f-mono);
  font-feature-settings: "tnum" 1;
}

/* ── WORDMARK ── */
.wordmark {
  font-family: var(--f-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.wordmark-properties {
  color: var(--teal-light); /* on dark */
}
/* On light backgrounds, "PROPERTIES" uses --ink */

/* ── LINK ── */
a { color: var(--teal); text-decoration: none; border-bottom: 1px solid rgba(42,124,111,0.25); transition: border-color 0.15s; }
a:hover { border-color: var(--teal); }

/* ── BUTTON ── */
.btn {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-pill);
  font-family: var(--f-body);
  font-weight: 500;
  font-size: var(--text-body);
  border: 1.5px solid transparent;
  cursor: pointer;
  line-height: 1.2;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.btn-primary { background: var(--teal); color: #fff; border-color: var(--teal); }
.btn-primary:hover { background: var(--teal-ink); border-color: var(--teal-ink); }
.btn-secondary { background: transparent; color: var(--teal); border-color: var(--teal); }
.btn-secondary:hover { background: var(--teal-pale); }
.btn-ink { background: var(--ink); color: var(--cream); }
.btn-ink:hover { background: #333; }
.btn-coral { background: var(--coral); color: #fff; }
.btn-coral:hover { background: var(--coral-ink); }

/* ── BADGE ── */
.badge {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  padding: 3px 10px;
  font-family: var(--f-mono);
  font-size: var(--text-micro);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
}
.badge-teal   { background: var(--go-bg);      color: var(--teal);       border-color: var(--go-border); }
.badge-gold   { background: var(--elevate-bg);  color: var(--gold-ink);   border-color: var(--elevate-border); }
.badge-ink    { background: var(--ink);         color: var(--cream); }
.badge-coral  { background: var(--nogo-bg);     color: var(--coral-ink);  border-color: var(--nogo-border); }

/* ── CARD ── */
.card {
  background: #fff;
  border: 1px solid var(--hair);
  border-radius: var(--r-xl);
  overflow: hidden;
}
.card-cream {
  background: var(--cream);
  border: none;
}
.card h3 { font-family: var(--f-display); font-weight: 700; }
.card .address {
  font-family: var(--f-mono);
  font-size: var(--text-micro);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--mid);
}

/* ── GRAIN OVERLAY (optional) ── */
.grain::after {
  content: '';
  position: fixed; inset: 0; pointer-events: none; z-index: 999;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  opacity: 0.5;
}

/* ═══════════════════════════════════════════════════════════════
   DROPPED TOKENS (v1 → v2)
   ─────────────────────────
   #F0D88A  Gold Light   → replaced by --gold at 15% opacity
   #D4EDE9  was "Teal Pale" → kept as --teal-pale
   #7A7269  was unnamed   → formalised as --mid
   ═══════════════════════════════════════════════════════════════ */

/* ── WORDMARK LOCKUP (logo + text) ──
   The standardised header lockup. Use on every page header. */
.wordmark-lockup { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; border: 0; }
.wordmark-lockup img { display: block; }
.wordmark-text { display: inline-flex; align-items: baseline; }
.wm-roman   { font-family: var(--f-display); font-weight: 700;  font-size: 1.4rem; color: var(--ink);        letter-spacing: -0.01em; }
.wm-italic  { font-family: var(--f-display); font-weight: 400;  font-style: italic; font-size: 1.4rem; color: var(--teal); letter-spacing: -0.005em; margin-left: 4px; }
/* On dark backgrounds: wrap parent in .dark or apply class to lockup */
.dark .wm-roman,    .wordmark-lockup.dark .wm-roman   { color: var(--cream); }
.dark .wm-italic,   .wordmark-lockup.dark .wm-italic  { color: var(--teal-light); }