/* ==========================================================================
   Bobby Khan — Core Design Tokens
   Colors & Type (single source of truth)
   ========================================================================== */

/* Font: Archivo (substitute for LamboType — see README for flag) */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@87..112,300;87..112,400;87..112,500;87..112,600;87..112,700;87..112,900&display=swap');

:root {
  /* ----------------------------------------------------------------------
     COLOR — Primitive tokens
     ---------------------------------------------------------------------- */

  /* Accent (gold) */
  --bk-gold:        #FFC000;   /* primary CTA */
  --bk-gold-hover:  #917300;   /* darkened hover/pressed */
  --bk-gold-text:   #FFCE3E;   /* inline text accent */

  /* Core neutrals */
  --bk-black:       #000000;   /* true black — canvas */
  --bk-iron:        #181818;   /* deep surface */
  --bk-charcoal:    #202020;   /* elevated surface */
  --bk-shadow:      #313131;   /* darker grey text */
  --bk-graphite:    #494949;   /* dark body on light */
  --bk-iron-text:   #555555;   /* mid body */
  --bk-slate:       #666666;   /* secondary content */
  --bk-ash:         #7D7D7D;   /* muted/meta */
  --bk-steel:       #969696;   /* disabled/labels */
  --bk-mist:        #E6E6E6;   /* light surface */
  --bk-near-white:  #F8F8F8;
  --bk-smoke:       #F5F5F5;
  --bk-white:       #FFFFFF;

  /* Semantic / accent */
  --bk-cyan:        #29ABE2;   /* informational */
  --bk-link-blue:   #3860BE;   /* link hover */
  --bk-teal-action: #1EAEDB;   /* ghost button hover */

  /* Overlays */
  --bk-overlay-70:  rgba(0,0,0,0.70);
  --bk-overlay-50:  rgba(0,0,0,0.50);
  --bk-overlay-25:  rgba(0,0,0,0.25);
  --bk-white-50:    rgba(255,255,255,0.50);
  --bk-white-70:    rgba(255,255,255,0.70);

  /* ----------------------------------------------------------------------
     COLOR — Semantic roles
     ---------------------------------------------------------------------- */
  --bg:           var(--bk-black);
  --bg-elevated:  var(--bk-charcoal);
  --bg-deep:      var(--bk-iron);
  --bg-light:     var(--bk-near-white);

  --fg:           var(--bk-white);          /* primary text on dark */
  --fg-muted:     var(--bk-ash);            /* secondary on dark */
  --fg-disabled:  var(--bk-steel);
  --fg-on-light:  var(--bk-graphite);       /* primary text on light */

  --accent:       var(--bk-gold);
  --accent-hover: var(--bk-gold-hover);
  --accent-text:  var(--bk-gold-text);

  --link:         var(--bk-white);
  --link-hover:   var(--bk-link-blue);

  --border:       var(--bk-white-50);       /* default stroke on dark */
  --border-dim:   var(--bk-charcoal);       /* hairline dividers */

  /* ----------------------------------------------------------------------
     TYPE — Families
     ---------------------------------------------------------------------- */
  --font-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ----------------------------------------------------------------------
     TYPE — Scale (sizes / line-heights / tracking)
     Follows the Lamborghini-inspired extreme scale range (12:1)
     ---------------------------------------------------------------------- */
  --fs-hero:      7.50rem;   /* 120px */
  --fs-display-2: 5.00rem;   /* 80px  */
  --fs-section:   3.38rem;   /* 54px  */
  --fs-sub:       2.50rem;   /* 40px  */
  --fs-feature:   1.69rem;   /* 27px  */
  --fs-card:      1.50rem;   /* 24px  */
  --fs-body-lg:   1.13rem;   /* 18px  */
  --fs-body:      1.00rem;   /* 16px  */
  --fs-btn:       0.90rem;   /* 14.4px */
  --fs-btn-sm:    0.81rem;   /* 13px */
  --fs-caption:   0.88rem;   /* 14px */
  --fs-label:     0.75rem;   /* 12px */
  --fs-micro:     0.63rem;   /* 10px */

  /* Line heights — tight at display scale */
  --lh-tightest:  0.92;
  --lh-tight:     1.13;
  --lh-snug:      1.19;
  --lh-normal:    1.50;
  --lh-loose:     1.83;

  /* Tracking */
  --tr-tight:     -0.42px;
  --tr-normal:    0;
  --tr-wide:      0.14px;
  --tr-wider:     0.20px;
  --tr-widest:    0.96px;

  /* ----------------------------------------------------------------------
     SPACING — 8px base, full scale
     ---------------------------------------------------------------------- */
  --sp-0:   0;
  --sp-px:  1px;
  --sp-1:   2px;
  --sp-2:   4px;
  --sp-3:   5px;
  --sp-4:   8px;
  --sp-5:   10px;
  --sp-6:   12px;
  --sp-7:   15px;
  --sp-8:   16px;
  --sp-10:  20px;
  --sp-12:  24px;
  --sp-16:  32px;
  --sp-20:  40px;
  --sp-24:  48px;
  --sp-28:  56px;
  --sp-32:  64px;
  --sp-40:  80px;
  --sp-48:  96px;

  /* ----------------------------------------------------------------------
     RADII — angular system (zero dominates)
     ---------------------------------------------------------------------- */
  --radius-0:   0;          /* default for everything */
  --radius-1:   1px;
  --radius-2:   2px;        /* badges, cookie close */
  --radius-pill: 20px;      /* toggles only */

  /* ----------------------------------------------------------------------
     ELEVATION — surface layering (no shadows on dark canvas)
     ---------------------------------------------------------------------- */
  --elev-0: var(--bk-black);     /* abyss */
  --elev-1: var(--bk-iron);      /* deep panels */
  --elev-2: var(--bk-charcoal);  /* cards */
  --elev-3: var(--bk-shadow);    /* popovers */

  /* Light-mode shadows (reserved for rare light sections) */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.08);
  --shadow-md: 0 2px 8px rgba(0,0,0,0.12);

  /* ----------------------------------------------------------------------
     LAYOUT
     ---------------------------------------------------------------------- */
  --container-max: 1440px;
  --content-max:   1200px;

  /* ----------------------------------------------------------------------
     MOTION — minimal
     ---------------------------------------------------------------------- */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:     cubic-bezier(0.6, 0, 0.8, 0.25);
  --dur-fast:    120ms;
  --dur-base:    200ms;
  --dur-slow:    400ms;
}

/* ==========================================================================
   Base element styles — apply the system
   ========================================================================== */

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Semantic display roles */
.bk-hero,
h1.bk-hero {
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  line-height: var(--lh-tightest);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: var(--tr-normal);
  margin: 0;
}

h1 {
  font-family: var(--font-display);
  font-size: var(--fs-display-2);
  line-height: var(--lh-tight);
  font-weight: 400;
  text-transform: uppercase;
  margin: 0;
}

h2 {
  font-family: var(--font-display);
  font-size: var(--fs-section);
  line-height: var(--lh-snug);
  font-weight: 400;
  text-transform: uppercase;
  margin: 0;
}

h3 {
  font-family: var(--font-display);
  font-size: var(--fs-sub);
  line-height: var(--lh-tight);
  font-weight: 400;
  text-transform: uppercase;
  margin: 0;
}

h4 {
  font-family: var(--font-display);
  font-size: var(--fs-feature);
  line-height: 1.37;
  font-weight: 400;
  text-transform: uppercase;
  margin: 0;
}

h5 {
  font-family: var(--font-display);
  font-size: var(--fs-card);
  line-height: 1.25;
  font-weight: 400;
  margin: 0;
}

p {
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  margin: 0 0 var(--sp-12) 0;
  color: var(--fg);
}

.bk-body-lg {
  font-size: var(--fs-body-lg);
  line-height: 1.56;
}

.bk-caption {
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: var(--tr-tight);
  text-transform: uppercase;
  line-height: 1.14;
}

.bk-label {
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--tr-widest);
  text-transform: uppercase;
  line-height: var(--lh-loose);
}

.bk-micro {
  font-size: var(--fs-micro);
  font-weight: 400;
  letter-spacing: 0.225px;
  text-transform: uppercase;
  line-height: 1.2;
}

a {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--dur-base) var(--ease-out);
}
a:hover { color: var(--link-hover); }

code, pre {
  font-family: var(--font-mono);
}

/* ==========================================================================
   Button primitives — sharp, angular, zero-radius
   ========================================================================== */
.bk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-8);
  border: 0;
  border-radius: var(--radius-0);
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: var(--tr-wider);
  cursor: pointer;
  transition: background-color var(--dur-base) var(--ease-out),
              color        var(--dur-base) var(--ease-out),
              opacity      var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
  user-select: none;
  text-decoration: none;
}

.bk-btn--gold {
  background: var(--bk-gold);
  color: var(--bk-black);
  padding: var(--sp-12) var(--sp-20);
  font-size: var(--fs-body);
}
.bk-btn--gold:hover { background: var(--bk-gold-hover); color: var(--bk-black); }

.bk-btn--ghost {
  background: transparent;
  color: var(--bk-white);
  border: 1px solid var(--bk-white);
  padding: var(--sp-8) var(--sp-16);
  font-size: var(--fs-btn);
  opacity: 0.5;
}
.bk-btn--ghost:hover {
  background: var(--bk-teal-action);
  border-color: var(--bk-teal-action);
  opacity: 0.7;
  color: var(--bk-white);
}

.bk-btn--white {
  background: var(--bk-white);
  color: var(--bk-charcoal);
  padding: var(--sp-12) var(--sp-20);
  font-size: var(--fs-body);
}
.bk-btn--white:hover { background: var(--bk-mist); }

.bk-btn--black {
  background: var(--bk-black);
  color: var(--bk-white);
  padding: var(--sp-12) var(--sp-20);
  font-size: var(--fs-body);
}
.bk-btn--black:hover { background: var(--bk-shadow); }

.bk-btn--gray {
  background: var(--bk-steel);
  color: var(--bk-charcoal);
  padding: var(--sp-8) var(--sp-12);
  font-size: var(--fs-btn-sm);
}

.bk-btn--sm { padding: var(--sp-4) var(--sp-10); font-size: var(--fs-btn-sm); letter-spacing: 0.13px; }
.bk-btn--lg { padding: var(--sp-16) var(--sp-24); font-size: var(--fs-body); }

/* Badge */
.bk-badge {
  display: inline-block;
  background: var(--bk-steel);
  color: var(--bk-white);
  padding: var(--sp-4) var(--sp-8);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: var(--tr-widest);
  text-transform: uppercase;
  border-radius: var(--radius-2);
}
.bk-badge--gold { background: var(--bk-gold); color: var(--bk-black); }
.bk-badge--outline { background: transparent; border: 1px solid var(--bk-white-50); }

/* Surfaces */
.bk-card {
  background: var(--bk-charcoal);
  border-radius: var(--radius-0);
  padding: var(--sp-20);
  color: var(--bk-white);
}

.bk-divider {
  border: 0;
  border-bottom: 1px solid var(--bk-charcoal);
  margin: var(--sp-20) 0;
}

/* Hexagon motif — used for video pause button */
.bk-hex {
  width: 48px;
  height: 48px;
  clip-path: polygon(25% 6.7%, 75% 6.7%, 100% 50%, 75% 93.3%, 25% 93.3%, 0% 50%);
  background: transparent;
  border: 0;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bk-white);
}
.bk-hex-outline {
  /* outlined hexagon via two stacked clip-path layers */
  position: relative;
  width: 48px;
  height: 48px;
}
.bk-hex-outline::before,
.bk-hex-outline::after {
  content: '';
  position: absolute;
  inset: 0;
  clip-path: polygon(25% 6.7%, 75% 6.7%, 100% 50%, 75% 93.3%, 25% 93.3%, 0% 50%);
}
.bk-hex-outline::before { background: var(--bk-white); }
.bk-hex-outline::after  { background: var(--bk-black); inset: 1.5px; }