/* ============================================================
   Equiti Design System · Core tokens + typography
   ============================================================ */

/* ---- Fonts ---- */
@font-face {
  font-family: 'Gilroy';
  src: url('fonts/Gilroy-Light.ttf') format('truetype');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Gilroy';
  src: url('fonts/Gilroy-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Gilroy';
  src: url('fonts/Gilroy-Medium.ttf') format('truetype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Gilroy';
  src: url('fonts/Gilroy-SemiBold.ttf') format('truetype');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Gilroy';
  src: url('fonts/Gilroy-Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Gilroy';
  src: url('fonts/Gilroy-ExtraBold.ttf') format('truetype');
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Gilroy';
  src: url('fonts/Gilroy-Heavy.ttf') format('truetype');
  font-weight: 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter-Variable.ttf') format('truetype-variations');
  font-weight: 100 900; font-style: normal; font-display: swap;
}

:root {
  /* ---------- Brand colors ---------- */
  --equiti-teal: #00AFAB;
  --equiti-black: #0E1420;
  --equiti-white: #FFFFFF;

  /* Secondary */
  --equiti-blue: #2E90FA;
  --equiti-yellow: #FAC515;

  /* System / semantic */
  --equiti-error: #F04438;
  --equiti-warning: #F79009;
  --equiti-success: #17B26A;

  /* Interactive */
  --equiti-button-teal: #81D8D0;

  /* Teal scale */
  --teal-50: #EFFDFD;
  --teal-100: #CCF7F3;
  --teal-200: #99E5E1;
  --teal-300: #5CC6F3;
  --teal-400: #33C1BD;
  --teal-500: #00AFAB;
  --teal-600: #008DB9;
  --teal-700: #006B67;
  --teal-800: #004A45;
  --teal-900: #002922;
  --teal-950: #000700;

  /* Neutral scale */
  --neutral-50:  #F9FAFB;
  --neutral-100: #F2F4F7;
  --neutral-200: #EAECF0;
  --neutral-300: #D0D5DD;
  --neutral-400: #98A2B3;
  --neutral-500: #667085;
  --neutral-600: #475467;
  --neutral-700: #344054;
  --neutral-800: #182230;
  --neutral-900: #101828;
  --neutral-950: #0E1420;

  /* ---------- Semantic aliases (dark mode default) ---------- */
  --bg:            var(--equiti-black);
  --bg-elev-1:     var(--neutral-900);
  --bg-elev-2:     var(--neutral-800);
  --surface:       var(--neutral-900);
  --fg:            var(--equiti-white);
  --fg-muted:      var(--neutral-400);
  --fg-subtle:     var(--neutral-500);
  --accent:        var(--equiti-teal);
  --accent-soft:   var(--equiti-button-teal);
  --border:        rgba(255,255,255,0.08);
  --border-strong: rgba(255,255,255,0.16);
  --chart-up:      var(--equiti-success);
  --chart-down:    var(--equiti-error);

  /* Light-mode aliases (use on .light container) */

  /* ---------- Typography ---------- */
  --font-display: 'Gilroy', 'Inter', system-ui, -apple-system, sans-serif;
  --font-body:    'Inter', 'Helvetica', 'Arial', system-ui, sans-serif;
  --font-intl:    'Noto Sans', 'Inter', system-ui, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Type scale (px) */
  --fs-display-2xl: 72px;
  --fs-display-xl:  60px;
  --fs-display-lg:  48px;
  --fs-display-md:  36px;
  --fs-display-sm:  30px;
  --fs-display-xs:  24px;
  --fs-text-xl:     20px;
  --fs-text-lg:     18px;
  --fs-text-md:     16px;
  --fs-text-sm:     14px;
  --fs-text-xs:     12px;

  /* Line heights */
  --lh-display-2xl: 90px;
  --lh-display-xl:  72px;
  --lh-display-lg:  60px;
  --lh-display-md:  44px;
  --lh-display-sm:  38px;
  --lh-display-xs:  32px;
  --lh-text-xl: 30px;
  --lh-text-lg: 28px;
  --lh-text-md: 24px;
  --lh-text-sm: 20px;
  --lh-text-xs: 18px;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;

  /* ---------- Spacing (8-pt base) ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ---------- Radii ---------- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-pill: 999px;

  /* ---------- Shadows ---------- */
  --shadow-sm: 0 1px 3px rgba(14,20,32,0.10), 0 1px 2px rgba(14,20,32,0.06);
  --shadow-md: 0 4px 8px -2px rgba(14,20,32,0.10), 0 2px 4px -2px rgba(14,20,32,0.06);
  --shadow-lg: 0 20px 24px -4px rgba(14,20,32,0.08), 0 8px 8px -4px rgba(14,20,32,0.03);
  --shadow-glow-teal: 0 8px 32px -8px rgba(0,175,171,0.45);

  /* ---------- Motion ---------- */
  --ease-standard: cubic-bezier(.4,0,.2,1);
  --ease-emphasized: cubic-bezier(.2,.9,.2,1);
  --dur-fast: 120ms;
  --dur-med: 220ms;
  --dur-slow: 360ms;
}

/* Light-theme override */
.light, :root.light {
  --bg: #FFFFFF;
  --bg-elev-1: var(--neutral-50);
  --bg-elev-2: var(--neutral-100);
  --surface: #FFFFFF;
  --fg: var(--equiti-black);
  --fg-muted: var(--neutral-600);
  --fg-subtle: var(--neutral-500);
  --border: var(--neutral-200);
  --border-strong: var(--neutral-300);
}

/* ---------- Semantic type utilities ---------- */
html, body {
  font-family: var(--font-body);
  font-size: var(--fs-text-md);
  line-height: var(--lh-text-md);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1, .display-lg {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-display-lg);
  line-height: var(--lh-display-lg);
  letter-spacing: var(--tracking-tight);
}
h2, .h2, .display-md {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-display-md);
  line-height: var(--lh-display-md);
  letter-spacing: var(--tracking-tight);
}
h3, .h3, .display-sm {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-display-sm);
  line-height: var(--lh-display-sm);
}
h4, .h4, .display-xs {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-display-xs);
  line-height: var(--lh-display-xs);
}
.display-2xl { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-display-2xl); line-height: var(--lh-display-2xl); letter-spacing: var(--tracking-tight); }
.display-xl  { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-display-xl);  line-height: var(--lh-display-xl);  letter-spacing: var(--tracking-tight); }

p, .body {
  font-family: var(--font-body);
  font-size: var(--fs-text-md);
  line-height: var(--lh-text-md);
  color: var(--fg);
}
.text-xl { font-size: var(--fs-text-xl); line-height: var(--lh-text-xl); }
.text-lg { font-size: var(--fs-text-lg); line-height: var(--lh-text-lg); }
.text-md { font-size: var(--fs-text-md); line-height: var(--lh-text-md); }
.text-sm { font-size: var(--fs-text-sm); line-height: var(--lh-text-sm); }
.text-xs { font-size: var(--fs-text-xs); line-height: var(--lh-text-xs); }

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

code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

a {
  color: var(--accent);
  text-decoration: none;
  transition: opacity var(--dur-fast) var(--ease-standard);
}
a:hover { text-decoration: underline; }