/* ============================================================
   drin — design tokens
   AI opportunity intelligence
   Two palettes: EMBER (hero gate only) + CORE (near-black + white light)
   ============================================================ */

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

:root {
  /* ---- CORE: near-black foundation (cool-neutral) ---- */
  --void:        #060708;   /* deepest background */
  --base:        #0a0c0e;   /* page background */
  --surface-1:   #101316;   /* raised flat panel */
  --surface-2:   #161a1f;   /* higher panel */
  --surface-3:   #1d2228;

  /* glass */
  --glass-fill:    rgba(255,255,255,0.045);
  --glass-fill-2:  rgba(255,255,255,0.07);
  --glass-border:  rgba(255,255,255,0.10);
  --glass-edge:    rgba(255,255,255,0.18);   /* top highlight */

  /* lines */
  --line:        rgba(255,255,255,0.07);
  --line-strong: rgba(255,255,255,0.13);

  /* text */
  --text-hi:   #f3f5f6;
  --text-mid:  #a6adb4;
  --text-lo:   #6b7279;
  --text-dim:  #474d53;

  /* white light (the only "accent" below the hero) */
  --light:        rgba(255,255,255,0.9);
  --light-cool:   #e9f0f7;            /* faintest cool tint */
  --glow-white:   rgba(232,240,247,0.55);

  /* ---- EMBER: hero gate ONLY ---- */
  --ember-sun:    #ffe6bc;   /* hot white-gold core */
  --ember-amber:  #ffb277;
  --ember-glow:   #ff7a4d;
  --ember-coral:  #f0593a;
  --ember-deep:   #b8392c;
  --sky-peach:    #f0a585;
  --cloud-rose:   #e08a78;
  --stone:        #2b2723;   /* monolith silhouette */
  --smoke:        #6d6864;

  /* ---- type ---- */
  --font-display: 'Sora', sans-serif;
  --font-ui:      'Geist', sans-serif;
  --font-mono:    'Geist Mono', ui-monospace, monospace;

  /* fluid type scale */
  --t-display: clamp(3.2rem, 8.5vw, 8.5rem);
  --t-h1:      clamp(2.4rem, 5vw, 4rem);
  --t-h2:      clamp(1.9rem, 3.4vw, 2.9rem);
  --t-h3:      clamp(1.3rem, 2vw, 1.6rem);
  --t-lead:    clamp(1.05rem, 1.5vw, 1.3rem);
  --t-body:    1rem;
  --t-sm:      0.875rem;
  --t-xs:      0.75rem;
  --t-micro:   0.6875rem;

  /* ---- spacing (4-base) ---- */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;
  --s9: 96px; --s10: 128px; --s11: 192px;

  /* ---- radii ---- */
  --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --r-xl: 28px; --r-pill: 999px;

  /* ---- elevation ---- */
  --shadow-1: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-2: 0 8px 30px rgba(0,0,0,0.5);
  --shadow-3: 0 24px 70px rgba(0,0,0,0.6);
  --shadow-glow: 0 0 60px rgba(232,240,247,0.06);

  /* ---- motion ---- */
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-1: 0.18s; --dur-2: 0.4s; --dur-3: 0.7s; --dur-4: 1.1s;

  /* layout */
  --maxw: 1240px;
  --gutter: clamp(20px, 5vw, 64px);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--base);
  color: var(--text-hi);
  font-family: var(--font-ui);
  font-size: var(--t-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1,h2,h3,h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.04; letter-spacing: -0.02em; margin: 0; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }

::selection { background: rgba(255,255,255,0.16); color: #fff; }

.mono { font-family: var(--font-mono); }
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--text-lo);
}

/* utility container */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter); }

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}