/* ═══════════════════════════════════════════════════════════════
   Bonsai Homes — Colors + Type (approved)
   Canonical token layer. Approved in design-system review.

   Locked values:
   - Red       #ED0800   (identity, never substitute)
   - Ink       #1A1A1A   (body + UI text on light)
   - Bone      #F7F5F1   (surface neutral, default page)

   Surface ladder (luminance, Bone family):
   - Paper    #ECEAE6   (base page background, recessed zones)
   - Surface  #F7F5F1   (default card / page surface)
   - Elevated #FFFDF9   (raised card, modal, sheet)

   Banzai (dark) = inversion of the stage:
   - Banzai dark  #141412   (dark-mode primary surface)

   Fonts: Unbounded · Plus Jakarta Sans · JetBrains Mono
   ═══════════════════════════════════════════════════════════════ */

/* ─── Fonts ─────────────────────────────────────────────── */
@font-face {
  font-family: 'Unbounded';
  src: url('./fonts/Unbounded-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 200 900;
  font-display: swap;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('./fonts/PlusJakartaSans-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('./fonts/PlusJakartaSans-Italic-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('./fonts/JetBrainsMono-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 100 800;
  font-display: swap;
}

/* ─── Core tokens (identity) ────────────────────────────── */
:root {
  /* Identity — 3 colors only */
  --red:  #ED0800;
  --ink:  #1A1A1A;
  --bone: #F7F5F1;

  --red-cmyk: 0 97 100 7;
  --red-pantone: 485 C;

  /* Surface ladder — Bone family, luminance steps */
  --paper:    #ECEAE6;
  --surface:  #F7F5F1;
  --elevated: #FFFDF9;

  /* Banzai — dark mode surface (inversion) */
  --banzai:         #141412;
  --banzai-elevated:#1E1E1B;

  /* Text on light */
  --text-primary:   #1A1A1A;   /* ink */
  --text-secondary: #555555;   /* body muted */
  --text-tertiary:  #6B6B6B;   /* labels, meta */

  /* Text on dark (Banzai) */
  --text-on-dark-primary:   #FFFFFF;
  --text-on-dark-secondary: rgba(255,255,255,0.72);
  --text-on-dark-tertiary:  rgba(255,255,255,0.48);

  /* Dividers / strokes (from approved surface cards) */
  --divider:       rgba(26,26,26,0.08);
  --divider-soft:  rgba(26,26,26,0.06);
  --divider-firm:  rgba(26,26,26,0.12);
  --divider-dark:  rgba(255,255,255,0.08);

  /* — Geometry — */
  --radius: 3px;           /* one radius across the entire system */
  --radius-card: 3px;

  /* — Motion — */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:  0.5s;
  --dur-base:  0.8s;
  --dur-cross: 0.3s;
  --stagger:      0.12s;
  --stagger-fast: 0.08s;

  /* — Type families — */
  --font-head: 'Unbounded', system-ui, sans-serif;
  --font-body: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* — Web type scale (fluid) — */
  --text-display: clamp(48px, 5.5vw, 72px);
  --text-h1:      clamp(36px, 4.5vw, 56px);
  --text-h2:      clamp(28px, 3.5vw, 40px);
  --text-h3:      clamp(22px, 2.8vw, 32px);
  --text-h4:      clamp(18px, 2vw, 24px);
  --text-body:    clamp(16px, 1.5vw, 18px);
  --text-small:   clamp(14px, 1.2vw, 15px);
  --text-caption: clamp(12px, 1vw, 13px);

  /* — Social type scale (canvas-px, 1080×1440) — */
  --social-hero-min:    72px;
  --social-hero-max:    108px;
  --social-headline-min:48px;
  --social-headline-max:60px;
  --social-subhead-min: 36px;
  --social-subhead-max: 42px;
  --social-body-min:    39px;
  --social-body-max:    45px;
  --social-label-min:   30px;
  --social-label-max:   33px;
  --social-micro-min:   24px;
  --social-micro-max:   27px;

  /* — Tracking (weight-inverse rule) — */
  --track-heavy-xxl:  -0.03em;
  --track-heavy-xl:   -0.02em;
  --track-heavy-lg:   -0.01em;
  --track-neutral:     0em;
  --track-light-lg:   0.06em;
  --track-light-md:   0.08em;
  --track-light-sm:   0.10em;
  --track-mono-lg:    0.10em;
  --track-mono-sm:    0.15em;

  /* — Section padding — */
  --pad-xl: 64px;
  --pad-lg: 48px;
  --pad-md: 36px;
  --pad-sm: 28px;
  --pad-xs: 20px;

  /* — Container widths — */
  --cw-text:      700px;
  --cw-text-wide: 900px;
  --cw-image:     1100px;
  --cw-max:       1400px;
}

/* ─── Semantic roles (default = light / Bonsai) ─────────── */
:root {
  --bg-primary:   var(--surface);
  --bg-recessed:  var(--paper);
  --bg-elevated:  var(--elevated);
  --fg1:          var(--text-primary);
  --fg2:          var(--text-secondary);
  --fg3:          var(--text-tertiary);
  --accent:       var(--red);
  --stroke:       var(--divider);
}

/* Banzai mode — dark inversion */
[data-mode="banzai"] {
  --bg-primary:   var(--banzai);
  --bg-recessed:  #0F0F0D;
  --bg-elevated:  var(--banzai-elevated);
  --fg1:          var(--text-on-dark-primary);
  --fg2:          var(--text-on-dark-secondary);
  --fg3:          var(--text-on-dark-tertiary);
  --stroke:       var(--divider-dark);
}

/* ─── Base element styling ─────────────────────────────── */
body {
  font-family: var(--font-body);
  background: var(--bg-primary);
  color: var(--fg1);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-head);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 500;
  margin: 0;
}

/* ─── Semantic type roles ──────────────────────────────── */
.t-hero {
  font-family: var(--font-head);
  font-weight: 700;
  text-transform: uppercase;
  font-size: var(--text-display);
  letter-spacing: var(--track-heavy-xl);
  line-height: 1.03;
}

.t-declaration {
  font-family: var(--font-head);
  font-weight: 700;
  text-transform: uppercase;
  font-size: var(--text-h1);
  letter-spacing: var(--track-heavy-xl);
  line-height: 1.05;
}

.t-headline {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--text-h2);
  letter-spacing: var(--track-heavy-lg);
  line-height: 1.1;
}

.t-storyteller {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--text-h3);
  letter-spacing: var(--track-neutral);
  line-height: 1.2;
}

.t-subhead {
  font-family: var(--font-head);
  font-weight: 300;
  text-transform: uppercase;
  font-size: var(--text-h4);
  letter-spacing: var(--track-light-md);
  line-height: 1.3;
}

.t-body,
p.t-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-body);
  letter-spacing: 0;
  line-height: 1.6;
  color: var(--fg2);
}

.t-whisper {
  font-family: var(--font-head);
  font-weight: 300;
  text-transform: uppercase;
  font-size: var(--text-caption);
  letter-spacing: var(--track-light-sm);
  line-height: 1.4;
}

.t-label {
  font-family: var(--font-mono);
  font-weight: 400;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: var(--track-mono-lg);
  color: var(--fg3);
}
.t-label--red  { color: var(--red); }
.t-label--dark { color: var(--text-on-dark-secondary); }

.t-micro {
  font-family: var(--font-mono);
  font-weight: 400;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: var(--track-mono-sm);
  color: var(--fg3);
}

/* ─── Callout shape (brand motif) ──────────────────────── */
.callout-shape {
  clip-path: polygon(
    0% 0%,
    100% 0%,
    100% 30.91%,
    89.74% 45.71%,
    100% 45.71%,
    100% 85.26%,
    10.28% 85.26%,
    0% 100%
  );
  padding: 32px 40px 56px 32px;
}

/* ─── Utilities ────────────────────────────────────────── */
.section-padding {
  padding-inline: var(--pad-xl);
}
@media (max-width: 1280px) { .section-padding { padding-inline: var(--pad-lg); } }
@media (max-width: 1024px) { .section-padding { padding-inline: var(--pad-md); } }
@media (max-width: 768px)  { .section-padding { padding-inline: var(--pad-sm); } }
@media (max-width: 480px)  { .section-padding { padding-inline: var(--pad-xs); } }

.text-container      { max-width: var(--cw-text);      margin-inline: auto; }
.text-container-wide { max-width: var(--cw-text-wide); margin-inline: auto; }
.image-contained     { max-width: var(--cw-image);     margin-inline: auto; }

:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }