/* =========================================================================
   Dovale Design System — Tokens + Base Type
   Import this file as the single source of truth for color, type, spacing.
   ========================================================================= */

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

:root {
  /* --------------------------------------------------------------------- */
  /* COLOR — Primary                                                       */
  /* --------------------------------------------------------------------- */
  --gold: #F5A623;
  --gold-light: #FFC65A;
  --gold-dark: #D88A0A;
  --gold-deep: #B26F04;

  --ink: #0B0933;          /* Primary dark / page background */
  --ink-deep: #07061F;     /* Deepest near-black */
  --graphite: #1C1C1E;     /* Card / elevated surface on dark */
  --graphite-2: #2A2A2D;   /* Hover state on graphite */

  --white: #FFFFFF;
  --off-white: #F5F5F7;

  /* --------------------------------------------------------------------- */
  /* COLOR — Neutral scale (warm-leaning)                                  */
  /* --------------------------------------------------------------------- */
  --n-0:  #07061F;
  --n-1:  #0B0933;
  --n-2:  #1C1C1E;
  --n-3:  #2A2A2D;
  --n-4:  #3A3A3E;
  --n-5:  #5A5A5F;
  --n-6:  #9A9AA0;
  --n-7:  #C8C8CC;
  --n-8:  #E8E8EA;
  --n-9:  #F5F5F7;
  --n-10: #FFFFFF;

  /* --------------------------------------------------------------------- */
  /* COLOR — Semantic                                                      */
  /* --------------------------------------------------------------------- */
  --success: #34C759;
  --warning: #F5A623;
  --danger:  #FF3B30;
  --info:    #0A84FF;

  /* --------------------------------------------------------------------- */
  /* COLOR — Foreground / Background semantic tokens                       */
  /* --------------------------------------------------------------------- */
  --bg:           var(--ink);
  --bg-elevated:  var(--graphite);
  --bg-inverse:   var(--white);

  --fg:           var(--white);
  --fg-muted:     #C8C8CC;
  --fg-subtle:    #9A9AA0;
  --fg-inverse:   var(--ink);
  --fg-accent:    var(--gold);

  --border:           rgba(255, 255, 255, 0.08);
  --border-strong:    rgba(255, 255, 255, 0.16);
  --border-light:     #E8E8EA;
  --border-focus:     var(--gold);

  /* --------------------------------------------------------------------- */
  /* TYPE — Families                                                       */
  /* --------------------------------------------------------------------- */
  --font-display: 'Poppins', system-ui, -apple-system, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, monospace;

  /* --------------------------------------------------------------------- */
  /* TYPE — Scale (clamp values for fluid responsiveness)                  */
  /* --------------------------------------------------------------------- */
  --fs-display-1: clamp(3rem, 7vw, 6rem);          /* hero  48 → 96 */
  --fs-display-2: clamp(2.25rem, 4.5vw, 4rem);     /* section 36 → 64 */
  --fs-h1: clamp(2rem, 3.5vw, 3rem);               /* 32 → 48 */
  --fs-h2: clamp(1.5rem, 2.5vw, 2rem);             /* 24 → 32 */
  --fs-h3: 1.5rem;       /* 24 */
  --fs-h4: 1.25rem;      /* 20 */
  --fs-body-l: 1.125rem; /* 18 */
  --fs-body:   1rem;     /* 16 */
  --fs-body-s: 0.9375rem;/* 15 */
  --fs-caption: 0.8125rem; /* 13 */
  --fs-eyebrow: 0.75rem; /* 12 */

  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-normal:  1.5;
  --lh-relaxed: 1.6;

  --tracking-tighter: -0.03em;
  --tracking-tight:   -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.05em;
  --tracking-wider:   0.2em;

  /* --------------------------------------------------------------------- */
  /* SPACING (8-pt base)                                                   */
  /* --------------------------------------------------------------------- */
  --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;
  --sp-11: 160px;
  --sp-12: 200px;

  --section-y:        clamp(96px, 12vw, 160px);
  --container-px:     clamp(24px, 5vw, 48px);
  --container-max:    1280px;

  /* --------------------------------------------------------------------- */
  /* RADIUS                                                                */
  /* --------------------------------------------------------------------- */
  --radius-sm:   6px;
  --radius-md:   8px;       /* buttons, inputs */
  --radius-lg:   12px;      /* images */
  --radius-xl:   16px;      /* cards */
  --radius-2xl:  24px;
  --radius-full: 9999px;

  /* --------------------------------------------------------------------- */
  /* SHADOWS                                                               */
  /* --------------------------------------------------------------------- */
  --shadow-sm:   0 1px 2px rgba(0,0,0,0.5);
  --shadow-md:   0 8px 24px rgba(0,0,0,0.4);
  --shadow-lg:   0 20px 60px rgba(0,0,0,0.5);
  --shadow-gold: 0 12px 40px rgba(245,166,35,0.25);

  /* --------------------------------------------------------------------- */
  /* MOTION                                                                */
  /* --------------------------------------------------------------------- */
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-standard:  cubic-bezier(0.4, 0, 0.2, 1);
  --dur-micro:   200ms;
  --dur-ui:      400ms;
  --dur-entrance: 700ms;
  --dur-counter: 1500ms;

  /* --------------------------------------------------------------------- */
  /* Z-INDEX                                                               */
  /* --------------------------------------------------------------------- */
  --z-nav:    50;
  --z-modal:  100;
  --z-cursor: 9999;
}

/* =========================================================================
   BASE TYPE — semantic element styling
   ========================================================================= */

html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--fg);
  background: var(--bg);
  font-feature-settings: 'cv11', 'ss01', 'ss03';
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}

h1 { font-size: var(--fs-h1); font-weight: 800; letter-spacing: var(--tracking-tighter); }
h2 { font-size: var(--fs-h2); font-weight: 700; }
h3 { font-size: var(--fs-h3); font-weight: 600; letter-spacing: var(--tracking-normal); }
h4 { font-size: var(--fs-h4); font-weight: 600; letter-spacing: var(--tracking-normal); }

.display-1 { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-display-1); line-height: var(--lh-tight); letter-spacing: var(--tracking-tighter); }
.display-2 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-display-2); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); }

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--fg-accent);
}

p { margin: 0 0 var(--sp-4) 0; line-height: var(--lh-relaxed); }
p:last-child { margin-bottom: 0; }

.body-l { font-size: var(--fs-body-l); line-height: var(--lh-relaxed); }
.caption { font-size: var(--fs-caption); color: var(--fg-muted); }

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--dur-micro) var(--ease-standard);
}
a:hover { color: var(--gold); }

::selection { background: var(--gold); color: var(--ink); }

/* Numerals — tabular for stat counters */
.tabular { font-variant-numeric: tabular-nums; }

/* Utility */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-px);
}