/* ============================================
   EGL Innovations — Design Tokens
   Dark mode · Teal accent · 2026
   ============================================ */

/* ── Self-hosted Fonts ── */

/* Inter — latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Inter — latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Plus Jakarta Sans — latin-ext */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url('../fonts/plus-jakarta-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Plus Jakarta Sans — latin */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url('../fonts/plus-jakarta-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* ── Backgrounds ── */
  --color-bg:          #09090b;   /* zinc-950 — page background */
  --color-bg-elevated: #18181b;   /* zinc-900 — cards, elevated surfaces */
  --color-bg-hover:    #27272a;   /* zinc-800 — hover states */
  --color-bg-subtle:   #0f0f12;   /* alternating section bg */
  --color-bg-footer:   #050507;   /* footer — darkest surface */

  /* ── Text ── */
  --color-text:           #fafafa;   /* zinc-50 — primary (headings, bold) */
  --color-text-secondary: #a1a1aa;   /* zinc-400 — body text */
  --color-text-muted:     #8a8a93;   /* zinc-450 — labels, meta (WCAG AA) */
  --color-text-faint:     #52525b;   /* zinc-600 — disabled, hints */

  /* ── Accent (teal) ── */
  --color-accent:       #14b8a6;
  --color-accent-light: #2dd4bf;
  --color-accent-dark:  #0d9488;
  --color-accent-cyan:  #06b6d4;
  --color-accent-glow:  rgba(20, 184, 166, 0.15);
  --color-accent-subtle:rgba(20, 184, 166, 0.08);

  /* ── Borders ── */
  --color-border:        rgba(255, 255, 255, 0.08);
  --color-border-hover:  rgba(255, 255, 255, 0.15);
  --color-border-accent: rgba(20, 184, 166, 0.3);

  /* ── Legacy mappings (referenced by existing components) ── */
  --color-white:        #fafafa;
  --color-navy:         #09090b;
  --color-navy-light:   #18181b;
  --color-teal:         #14b8a6;
  --color-teal-dark:    #0d9488;
  --color-teal-light:   #2dd4bf;
  --color-off-white:    #0f0f12;
  --color-light-gray:   #27272a;
  --color-mid-gray:     #a1a1aa;
  --color-dark-gray:    #d4d4d8;
  --color-border-light: rgba(255, 255, 255, 0.08);

  /* ── Typography ── */
  --font-heading: 'Plus Jakarta Sans', 'Inter', sans-serif;
  --font-body: 'Inter', 'DM Sans', sans-serif;

  /* Font sizes — fluid scale */
  --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: 1.875rem;
  --text-4xl: clamp(2rem, 4vw, 2.5rem);
  --text-5xl: clamp(2.5rem, 5vw, 3.25rem);
  --text-6xl: clamp(3.5rem, 8vw, 5.5rem);
  --text-7xl: clamp(4rem, 10vw, 7rem);

  /* Font weights */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;

  /* Line heights */
  --leading-tight: 1.2;
  --leading-snug: 1.35;
  --leading-normal: 1.6;
  --leading-relaxed: 1.7;

  /* Spacing scale */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 2rem;
  --space-xl: 4rem;
  --space-2xl: 8rem;
  --space-3xl: 10rem;

  /* Max widths */
  --max-width-content: 1280px;
  --max-width-text: 720px;

  /* Border radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* Shadows — dark mode (black-based, not gray) */
  --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg:  0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-xl:  0 16px 48px rgba(0, 0, 0, 0.6);
  --shadow-glow:    0 0 20px rgba(20, 184, 166, 0.15);
  --shadow-glow-lg: 0 0 40px rgba(20, 184, 166, 0.2);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 300ms ease;
  --transition-slow: 500ms ease;

  /* Gradients */
  --gradient-teal: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-light) 100%);
  --gradient-accent: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-cyan) 100%);
  --gradient-glow: radial-gradient(circle, rgba(20, 184, 166, 0.12) 0%, transparent 70%);
  --gradient-surface: linear-gradient(135deg, #18181b 0%, #09090b 100%);

  /* Section spacing */
  --space-section: clamp(5rem, 10vw, 8rem);
}