/* ============================================================
   BURKS BIZ DEV — Core Design Tokens
   Colors + Typography. Import this file into any artifact.
   "we don't pitch. we close."
   ============================================================ */

/* --- Fonts (free, from Google Fonts) ---------------------- */
@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Permanent+Marker&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* ---------- COLOR · raw palette ---------- */
  --black:          #0A0A0A;  /* primary background — authority + depth   */
  --crimson:        #B91C1C;  /* signature accent — CTAs + key moments    */
  --cream:          #F4EFE4;  /* primary text on dark — never pure white  */
  --crimson-bright: #DC2828;  /* hover states, eyebrow type               */
  --crimson-deep:   #8F1414;  /* print + embossed applications            */
  --bone:           #C9C5BC;  /* secondary text, captions, dividers       */

  /* a couple of derived surfaces for UI depth (kept in-family) */
  --panel:          #141414;  /* raised surface on black                  */
  --panel-2:        #1C1C1C;  /* hover surface / inset                    */
  --hairline:       rgba(244,239,228,0.12);  /* cream @ 12% — dividers    */
  --hairline-strong:rgba(244,239,228,0.22);

  /* ---------- COLOR · semantic ---------- */
  --bg:             var(--black);
  --surface:        var(--panel);
  --surface-raised: var(--panel-2);
  --fg:             var(--cream);     /* primary foreground               */
  --fg-muted:       var(--bone);      /* secondary foreground             */
  --fg-faint:       rgba(201,197,188,0.55);
  --accent:         var(--crimson);
  --accent-hover:   var(--crimson-bright);
  --accent-press:   var(--crimson-deep);
  --border:         var(--hairline);
  --border-strong:  var(--hairline-strong);
  --focus-ring:     var(--crimson-bright);

  /* on-light (inverted) usage for proposals/letterhead/print */
  --inv-bg:         var(--cream);
  --inv-fg:         var(--black);
  --inv-muted:      #5A564E;

  /* ---------- TYPE · families ---------- */
  --font-display: 'Archivo Black', 'Arial Black', system-ui, sans-serif; /* headlines, ALL CAPS */
  --font-mark:    'Permanent Marker', 'Bradley Hand', cursive;            /* manifestation voice */
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;          /* everything else     */

  /* ---------- TYPE · weights ---------- */
  --w-regular: 400;
  --w-medium:  500;
  --w-semibold:600;
  --w-bold:    700;

  /* ---------- TYPE · scale (1.25 major-third, 16px base) ---------- */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   22px;
  --text-xl:   28px;
  --text-2xl:  36px;
  --text-3xl:  48px;
  --text-4xl:  64px;
  --text-5xl:  88px;
  --text-6xl:  120px;

  /* ---------- 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;

  /* ---------- RADII ---------- */
  /* The brand is architectural + hard-edged. Corners stay sharp.
     Use 0 for brand-forward surfaces; small radii only for soft UI. */
  --radius-0:  0px;     /* default — logo container, hero panels, buttons */
  --radius-sm: 2px;     /* inputs, chips                                   */
  --radius-md: 4px;     /* cards in app UI                                 */
  --radius-pill: 999px; /* avatar dots, status pills only                 */

  /* ---------- BORDERS ---------- */
  --border-hair:  1px solid var(--border);
  --border-line:  1px solid var(--border-strong);
  --border-frame: 2px solid var(--cream);   /* the logo-container frame    */

  /* ---------- SHADOWS (used sparingly — brand is flat) ---------- */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.45);
  --shadow-lg: 0 24px 64px rgba(0,0,0,0.55);

  /* ---------- MOTION ---------- */
  --ease: cubic-bezier(0.2, 0, 0, 1);   /* confident, decisive            */
  --dur-fast: 120ms;
  --dur:      200ms;
  --dur-slow: 360ms;
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   Lightweight resets + branded defaults. Scope as needed.
   ============================================================ */

.bbd, body.bbd {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* --- Eyebrow / kicker: crimson, tracked-out, uppercase --- */
.bbd .eyebrow,
.bbd-eyebrow {
  font-family: var(--font-body);
  font-weight: var(--w-semibold);
  font-size: var(--text-sm);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-hover);
}

/* --- Display headlines: Archivo Black, tight, uppercase --- */
.bbd h1, .bbd .h1 {
  font-family: var(--font-display);
  font-weight: 400;            /* Archivo Black is a single weight */
  font-size: var(--text-5xl);
  line-height: 0.98;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--fg);
  margin: 0;
}
.bbd h2, .bbd .h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-3xl);
  line-height: 1.02;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  color: var(--fg);
  margin: 0;
}
.bbd h3, .bbd .h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-xl);
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--fg);
  margin: 0;
}
.bbd h4, .bbd .h4 {
  font-family: var(--font-body);
  font-weight: var(--w-bold);
  font-size: var(--text-md);
  letter-spacing: 0.01em;
  color: var(--fg);
  margin: 0;
}

/* --- Body copy --- */
.bbd p, .bbd .body {
  font-family: var(--font-body);
  font-weight: var(--w-regular);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--fg);
  text-wrap: pretty;
  margin: 0 0 1em;
}
.bbd .lead {
  font-size: var(--text-lg);
  line-height: 1.5;
  color: var(--fg);
}
.bbd .muted { color: var(--fg-muted); }
.bbd .caption {
  font-size: var(--text-sm);
  color: var(--fg-muted);
  letter-spacing: 0.01em;
}

/* --- The manifestation voice: Permanent Marker, crimson, -2deg --- */
.bbd .manifest,
.bbd-manifest {
  font-family: var(--font-mark);
  font-weight: 400;
  color: var(--accent);
  text-transform: lowercase;
  display: inline-block;
  transform: rotate(-2deg);
  line-height: 1.1;
}

/* --- Crimson highlight word inside a headline --- */
.bbd .accent-word { color: var(--accent); }

/* --- Links --- */
.bbd a {
  color: var(--fg);
  text-decoration: none;
  border-bottom: 2px solid var(--accent);
  transition: color var(--dur) var(--ease);
}
.bbd a:hover { color: var(--accent-hover); }