/* ============================================================
   ROBERTSON DAWGS — Core Tokens
   Black • Gold • White. Premium. No-nonsense. Results-driven.
   ============================================================ */

/* ---------- Webfonts ----------
   Headers want an Arial-Black-grade heavy sans. Substituting:
     • Archivo Black  → closest to Arial Black (heavy, geometric, not condensed)
     • Oswald         → condensed display alternative for stacked headlines
     • Manrope        → clean, readable body sans
   FLAG: substitute Google Fonts. Swap in licensed Arial Black + a custom
   display face if/when available.
------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Oswald:wght@500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
  /* ---------- Color: Surface ---------- */
  --rd-black:        #000000;   /* true black, brand foundation */
  --rd-ink:          #0A0A0A;   /* page background */
  --rd-coal:         #141414;   /* raised surface */
  --rd-graphite:     #1C1C1C;   /* card background */
  --rd-iron:         #2A2A2A;   /* hairline border */
  --rd-steel:        #3A3A3A;   /* divider / disabled bg */

  /* ---------- Color: Gold (brand accent) ---------- */
  --rd-gold:         #C9A961;   /* primary brand gold — slightly muted, premium */
  --rd-gold-bright:  #E0BE71;   /* hover / highlight */
  --rd-gold-deep:    #A88B4A;   /* pressed / shadowed */
  --rd-bronze:       #735B30;   /* low-emphasis gold accent */
  --rd-gold-tint:    rgba(201, 169, 97, 0.12);  /* gold wash */

  /* ---------- Color: Light / text ---------- */
  --rd-white:        #FFFFFF;
  --rd-bone:         #F5F2EA;   /* off-white, warmer than pure white */
  --rd-ash:          #B8B5AD;   /* muted body text */
  --rd-fog:          #6E6B65;   /* low-emphasis / captions */

  /* ---------- Semantic foreground ---------- */
  --fg-primary:      var(--rd-bone);
  --fg-secondary:    var(--rd-ash);
  --fg-muted:        var(--rd-fog);
  --fg-accent:       var(--rd-gold);
  --fg-on-gold:      var(--rd-black);

  /* ---------- Semantic background ---------- */
  --bg-page:         var(--rd-ink);
  --bg-surface:      var(--rd-coal);
  --bg-card:         var(--rd-graphite);
  --bg-raised:       #1F1F1F;

  /* ---------- Border ---------- */
  --border-hairline: var(--rd-iron);
  --border-strong:   var(--rd-steel);
  --border-gold:     var(--rd-gold);

  /* ---------- Status (used sparingly) ---------- */
  --status-success:  #6FA86A;   /* desaturated, mossy — fits the premium palette */
  --status-warn:     #D89B3F;
  --status-danger:   #C9483F;

  /* ---------- Type: Family ---------- */
  --font-display:    'Archivo Black', 'Arial Black', 'Helvetica Neue', system-ui, sans-serif;
  --font-condensed:  'Oswald', 'Arial Narrow', 'Impact', sans-serif;
  --font-body:       'Manrope', 'Helvetica Neue', system-ui, -apple-system, sans-serif;
  --font-mono:       'JetBrains Mono', 'SF Mono', Menlo, monospace;

  /* ---------- Type: Scale (1.250 — major third) ---------- */
  --fs-xs:    12px;
  --fs-sm:    14px;
  --fs-base:  16px;
  --fs-md:    18px;
  --fs-lg:    22px;
  --fs-xl:    28px;
  --fs-2xl:   36px;
  --fs-3xl:   48px;
  --fs-4xl:   64px;
  --fs-5xl:   88px;
  --fs-6xl:   120px;
  --fs-7xl:   160px;

  /* ---------- Type: Weight ---------- */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-extra:    800;
  --fw-black:    900;

  /* ---------- Type: Line height ---------- */
  --lh-tight:   1.00;
  --lh-snug:    1.12;
  --lh-normal:  1.45;
  --lh-loose:   1.65;

  /* ---------- Type: Tracking ---------- */
  --tr-display: -0.02em;     /* tighten huge display */
  --tr-headline: -0.005em;
  --tr-body:    0;
  --tr-eyebrow: 0.18em;      /* the all-caps gold eyebrow look */
  --tr-button:  0.08em;

  /* ---------- Spacing (8pt base) ---------- */
  --sp-0:    0;
  --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;

  /* ---------- Radius ---------- */
  --r-none:   0;
  --r-sm:     2px;
  --r-md:     4px;
  --r-lg:     8px;
  --r-pill:   999px;
  /* Brand defaults to LOW radius — sharp, engineered, not friendly-cartoon. */

  /* ---------- Shadow ---------- */
  --shadow-sm:    0 1px 0 rgba(0,0,0,0.4);
  --shadow-md:    0 8px 24px rgba(0,0,0,0.5);
  --shadow-lg:    0 24px 60px rgba(0,0,0,0.6);
  --shadow-gold:  0 0 0 1px rgba(201,169,97,0.4), 0 12px 32px rgba(201,169,97,0.18);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.04);

  /* ---------- Motion ---------- */
  --ease-out:   cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in:    cubic-bezier(0.6, 0, 0.8, 0.3);
  --ease-snap:  cubic-bezier(0.85, 0, 0.15, 1);
  --t-fast:     120ms;
  --t-base:     200ms;
  --t-slow:     360ms;
}

/* ============================================================
   Semantic Type Roles
   ============================================================ */

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--rd-gold);
}

.display-mega {
  font-family: var(--font-display);
  font-size: var(--fs-7xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-display);
  text-transform: uppercase;
  color: var(--fg-primary);
}

.display-xl {
  font-family: var(--font-display);
  font-size: var(--fs-5xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-display);
  text-transform: uppercase;
}

.h1 {
  font-family: var(--font-display);
  font-size: var(--fs-4xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-display);
  text-transform: uppercase;
}

.h2 {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-headline);
  text-transform: uppercase;
}

.h3 {
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.h4 {
  font-family: var(--font-body);
  font-weight: var(--fw-extra);
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-headline);
}

.h5 {
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
}

.body-lg {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-md);
  line-height: var(--lh-loose);
  color: var(--fg-secondary);
}

.body {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--fg-secondary);
}

.caption {
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--fg-muted);
}

.label {
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: var(--fs-xs);
  letter-spacing: var(--tr-button);
  text-transform: uppercase;
  color: var(--fg-primary);
}

.kicker-gold {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--rd-gold);
}

.quote {
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: var(--fs-xl);
  font-style: italic;
  line-height: var(--lh-normal);
  color: var(--fg-primary);
}