/* ==========================================================================
   OpenSummit.AI — V2 Design Tokens
   Warm-dark premium. Mistral warmth · Mastercard editorial · Sentry edge.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  /* ── Colour — light base ──────────────────────────────────────────── */
  --ink:         #ffffff;  /* primary surface — white */
  --ink-2:       #f5f3f0;  /* elevated card base */
  --ink-3:       #edeae5;  /* raised panels / hover */
  --ink-4:       #e2dfd8;  /* highest elevation */

  /* Warm cream for accent surfaces */
  --cream:       #f5efe4;
  --cream-2:     #ebe3d2;
  --cream-ink:   #1a1520;

  /* Neutral scale — dark text on light */
  --fog-0:       #0d0b14;
  --fog-1:       #1a1520;   /* body text — near-black */
  --fog-2:       #4a4358;   /* muted body */
  --fog-3:       #7a7388;   /* supporting meta */
  --fog-4:       #c5c0cc;   /* hairline emphasis */

  /* Hairlines */
  --line:        rgba(0, 0, 0, .06);
  --line-2:      rgba(0, 0, 0, .10);
  --line-3:      rgba(0, 0, 0, .18);

  /* ── Accents ─────────────────────────────────────────────────────────── */
  --red:         #ff4d4d;   /* primary — OpenSummit signature */
  --red-2:       #ff6868;
  --red-hot:     #ff2a2a;
  --red-deep:    #991b1b;

  --teal:        #00e5cc;   /* positive / live / success */
  --teal-2:      #28f0d8;

  /* Mistral-style warm accents used for atmosphere only */
  --amber:       #f7b955;
  --copper:      #c47a3d;
  --sunset-a:    #ff4d4d;
  --sunset-b:    #f7b955;
  --sunset-c:    #7a2e9f;

  /* Speaker section colour coding */
  --s-clayton:   #c47a3d;
  --s-jack:      #5fb3ff;
  --s-dave:      #f7b955;
  --s-kia:       #7dd3a0;
  --s-charlie:   #ff4d4d;
  --s-matt:      #e53030;

  /* ── Type ────────────────────────────────────────────────────────────── */
  --ff-display:  'Space Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ff-body:     'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ff-mono:     ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Type scale — web page (rem-based) */
  --t-eyebrow:   .72rem;    /* 11.5 — uppercase labels */
  --t-meta:      .88rem;    /* 14 */
  --t-body-sm:   1rem;      /* 16 */
  --t-body:      1.06rem;   /* 17 */
  --t-body-lg:   1.2rem;    /* 19 */
  --t-body-xl:   1.4rem;    /* 22 */
  --t-h5:        1.5rem;    /* 24 */
  --t-h4:        2rem;      /* 32 */
  --t-h3:        2rem;      /* 32 */
  --t-h2:        2.8rem;    /* 44 */
  --t-h1:        3.2rem;    /* 51 */
  --t-display:   4.5rem;    /* 72 */
  --t-billboard: 6rem;      /* 96 */

  /* Tracking — aggressive negative on display (Mistral) */
  --tr-display:  -.038em;
  --tr-hero:     -.032em;
  --tr-h1:       -.028em;
  --tr-h2:       -.022em;
  --tr-h3:       -.018em;
  --tr-h4:       -.012em;
  --tr-body:     0;
  --tr-eyebrow:  .14em;     /* uppercase labels — Sentry */

  /* Line-height */
  --lh-tight:    .92;
  --lh-heading:  1.02;
  --lh-subhead:  1.12;
  --lh-body:     1.55;
  --lh-body-lg:  1.4;

  /* ── Radius — Mastercard 3-tier ──────────────────────────────────────── */
  --r-sharp:     4px;
  --r-med:       20px;
  --r-lg:        32px;
  --r-pill:      999px;

  /* ── Spacing — 4pt base, 8pt scale ──────────────────────────────────── */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 16px;
  --s-4: 24px;
  --s-5: 40px;
  --s-6: 64px;
  --s-7: 96px;
  --s-8: 144px;
  --s-9: 200px;

  /* ── Shadows — light mode ─────────────────────────────────────────── */
  --sh-cushion:
    0 1px 2px rgba(0, 0, 0, .06),
    0 8px 24px -8px rgba(0, 0, 0, .08);

  --sh-card:
    0 1px 2px rgba(0, 0, 0, .05),
    0 16px 48px -12px rgba(0, 0, 0, .1);

  --sh-floating:
    0 2px 4px rgba(0, 0, 0, .04),
    0 24px 64px -16px rgba(0, 0, 0, .12);

  --sh-button:
    0 1px 3px rgba(0, 0, 0, .12),
    0 1px 2px rgba(0, 0, 0, .06);

  --sh-button-ghost:
    0 0 0 1px rgba(255, 255, 255, .12) inset;

  --sh-glow-red:    0 0 100px -10px rgba(255, 77, 77, .4);
  --sh-glow-teal:   0 0 100px -10px rgba(0, 229, 204, .3);
  --sh-glow-amber:  0 0 140px -20px rgba(247, 185, 85, .3);

  /* ── Motion ──────────────────────────────────────────────────────────── */
  --e-out:    cubic-bezier(.2, .8, .2, 1);
  --e-inout:  cubic-bezier(.65, 0, .35, 1);
  --d-fast:   160ms;
  --d-med:    280ms;
  --d-slow:   520ms;

  /* ── Layout ──────────────────────────────────────────────────────────── */
  --container:      1280px;
  --container-wide: 1440px;
  --gutter:         32px;
  --nav-h:          64px;
}

/* ── Resets & defaults ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html {
  background: var(--ink);
  color: var(--fog-1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-family: var(--ff-body);
  font-size: 16px;
  line-height: var(--lh-body);
}
body {
  background:
    radial-gradient(ellipse 90% 60% at 50% -15%, rgba(255, 77, 77, .08), transparent 65%),
    radial-gradient(ellipse 70% 50% at 10% 25%, rgba(247, 185, 85, .07), transparent 60%),
    radial-gradient(ellipse 70% 50% at 90% 75%, rgba(0, 229, 204, .06), transparent 60%),
    radial-gradient(ellipse 50% 40% at 50% 50%, rgba(122, 46, 159, .04), transparent 70%),
    var(--ink);
  min-height: 100vh;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
button { font: inherit; border: 0; background: none; color: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }

::selection { background: var(--red); color: #fff; }

/* White SVGs/images need invert for light bg */
/* All speaker logos are now inverted via landing.css .speakers__logo */

/* ── Type primitives ────────────────────────────────────────────────────── */
.t-eyebrow {
  font-family: var(--ff-display);
  font-size: var(--t-eyebrow);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tr-eyebrow);
  color: var(--fog-2);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.t-eyebrow::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 12px var(--red);
}
.t-eyebrow--teal::before { background: var(--teal); box-shadow: 0 0 12px var(--teal); }
.t-eyebrow--amber::before { background: var(--amber); box-shadow: 0 0 12px var(--amber); }

.t-display {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: var(--t-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-display);
  color: var(--fog-0);
  text-wrap: balance;
}
.t-billboard {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: var(--t-billboard);
  line-height: .88;
  letter-spacing: var(--tr-display);
  color: var(--fog-0);
}
.t-h1 { font-family: var(--ff-display); font-weight: 700; font-size: var(--t-h1);
        line-height: var(--lh-heading); letter-spacing: var(--tr-h1); color: var(--fog-0); text-wrap: balance; }
.t-h2 { font-family: var(--ff-display); font-weight: 700; font-size: var(--t-h2);
        line-height: var(--lh-heading); letter-spacing: var(--tr-h2); color: var(--fog-0); text-wrap: balance; }
.t-h3 { font-family: var(--ff-display); font-weight: 600; font-size: var(--t-h3);
        line-height: var(--lh-subhead); letter-spacing: var(--tr-h3); color: var(--fog-0); text-wrap: balance; }
.t-h4 { font-family: var(--ff-display); font-weight: 600; font-size: var(--t-h4);
        line-height: var(--lh-subhead); letter-spacing: var(--tr-h4); color: var(--fog-0); }
.t-h5 { font-family: var(--ff-display); font-weight: 600; font-size: var(--t-h5);
        line-height: var(--lh-subhead); color: var(--fog-0); }

.t-body      { font-size: var(--t-body); line-height: var(--lh-body); color: var(--fog-1); }
.t-body-lg   { font-size: var(--t-body-lg); line-height: var(--lh-body); color: var(--fog-1); }
.t-body-xl   { font-size: var(--t-body-xl); line-height: var(--lh-body-lg); color: var(--fog-1); text-wrap: pretty; }
.t-meta      { font-size: var(--t-meta); line-height: 1.4; color: var(--fog-2); }

.t-accent    { color: var(--red); }
.t-teal      { color: var(--teal); }
.t-amber     { color: var(--amber); }
.t-muted     { color: var(--fog-2); }
.t-dim       { color: var(--fog-3); }

.t-mono      { font-family: var(--ff-mono); font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.t-tabular   { font-variant-numeric: tabular-nums; }

/* Mistral-style sunset gradient text */
.t-sunset {
  background: linear-gradient(100deg, var(--sunset-a) 0%, var(--amber) 55%, var(--teal) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ── Layout helpers ─────────────────────────────────────────────────────── */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.container-wide { width: 100%; max-width: var(--container-wide); margin: 0 auto; padding: 0 var(--gutter); }
.stack > * + * { margin-top: var(--s-4); }
.row { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4); }

@media (max-width: 900px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

/* ── Responsive type ────────────────────────────────────────────────────── */
@media (max-width: 1200px) {
  :root {
    --t-display: 6.5rem;
    --t-billboard: 9rem;
    --t-h1: 4.5rem;
    --t-h2: 3.2rem;
    --t-h3: 2.3rem;
    --t-h4: 1.6rem;
  }
}
@media (max-width: 700px) {
  :root {
    --t-display: 3.8rem;
    --t-billboard: 5rem;
    --t-h1: 3rem;
    --t-h2: 2.2rem;
    --t-h3: 1.7rem;
    --t-h4: 1.3rem;
    --gutter: 20px;
    --s-8: 96px;
    --s-7: 64px;
  }
}

/* ── Motion primitives ──────────────────────────────────────────────────── */
.anim-fade-up { animation: fadeUp 900ms var(--e-out) both; }
.anim-fade    { animation: fade 700ms var(--e-out) both; }
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fade {
  from { opacity: 0; } to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}