/* === Font Loading === */

@font-face {
  font-family: 'Satoshi';
  src: url('/fonts/Satoshi-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Satoshi';
  src: url('/fonts/Satoshi-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Satoshi';
  src: url('/fonts/Satoshi-Black.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('/fonts/Inter-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('/fonts/Inter-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('/fonts/Inter-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* === Design Tokens === */

:root {
  /* --- Colors --- */
  --dark-100: #060b1a;
  --light-100: #ffffff;
  --light-90: #e0e0e6;
  --light-80: #b0b0bc;
  --light-60: #7a7a8a;
  --light-40: #8a8a9a;
  --light-20: #2a2a3a;

  /* Primary — teal */
  --primary-100: #00baae;
  --primary-90: #43c2b7;
  --primary-80: #63cabf;
  --primary-60: #95d9d1;
  --primary-40: #c5ece8;
  --primary-20: #e5f7f5;
  --primary-alpha-10: rgba(0, 186, 174, 0.10);
  --primary-alpha-20: rgba(0, 186, 174, 0.20);

  /* Surface — dark mode */
  --surface-100: #0a0a18;
  --surface-95: #101020;
  --surface-90: #161628;
  --surface-85: #1c1c32;
  --surface-80: #24243c;
  --surface-70: #32324a;
  --surface-60: #44445c;
  --surface-0: #ffffff;

  /* Gradient accents */
  --gradient-purple: #6702AB;
  --gradient-pink: #ED4A9B;
  --gradient-purple-lt: #8030C7;
  --gradient-green: #48CF6E;

  /* --- Typography --- */
  --font-display: 'Satoshi', sans-serif;
  --font-body: 'Inter', sans-serif;

  /* Type scale (1rem = 16px) */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  2rem;
  --text-4xl:  2.5rem;
  --text-5xl:  3rem;
  --text-6xl:  3.75rem;
  --text-7xl:  4.5rem;
  --text-8xl:  5rem;
  --text-9xl:  6rem;

  /* Line heights */
  --leading-none:    1.0;
  --leading-tight:   1.1;
  --leading-snug:    1.3;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  /* Letter spacing */
  --tracking-tight:  -0.03em;
  --tracking-snug:   -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.05em;
  --tracking-wider:  0.1em;

  /* --- Spacing --- */
  --space-4:   4px;
  --space-8:   8px;
  --space-12:  12px;
  --space-16:  16px;
  --space-20:  20px;
  --space-24:  24px;
  --space-32:  32px;
  --space-40:  40px;
  --space-48:  48px;
  --space-56:  56px;
  --space-64:  64px;
  --space-80:  80px;
  --space-100: 100px;
  --space-120: 120px;
  --space-160: 160px;

  /* --- Layout --- */
  --width-narrow:  740px;
  --width-content: 900px;
  --width-wide:    1100px;
  --width-max:     1400px;
  --nav-height:    72px;

  /* --- Borders & Radius --- */
  --radius-sm:   4px;
  --radius-md:   4px;
  --radius-lg:   4px;
  --radius-xl:   4px;
  --radius-full: 9999px;

  --border-subtle: 1px solid rgba(255, 255, 255, 0.06);
  --border-light:  1px solid rgba(255, 255, 255, 0.10);
  --border-medium: 1px solid rgba(255, 255, 255, 0.15);

  /* --- Shadows & Overlays --- */
  --shadow-sm:    0 2px 8px rgba(0, 0, 0, 0.15);
  --shadow-md:    0 8px 32px rgba(0, 0, 0, 0.25);
  --shadow-lg:    0 16px 64px rgba(0, 0, 0, 0.35);
  --shadow-glow:  0 0 40px rgba(0, 186, 174, 0.15);
  --overlay-dark:  rgba(0, 0, 0, 0.56);
  --overlay-heavy: rgba(0, 0, 0, 0.72);

  /* --- Transitions --- */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast:   150ms;
  --duration-base:   250ms;
  --duration-slow:   500ms;
  --duration-reveal:  800ms;
}