/* ============================================================================
   EGKits Global Design Tokens (Public app)

   SINGLE SOURCE OF TRUTH for the public marketing site. Colors derive from the
   MudBlazor palette (--mud-palette-*) so the Theme Studio and dark mode stay
   authoritative -- recoloring the theme automatically recolors everything here,
   including the brand gradient. Fallbacks keep tokens usable on pages rendered
   before/without a MudThemeProvider (e.g. the splash and some auth states).
   ========================================================================== */
:root {
  /* ── Color (theme-driven) ──────────────────────────────────────────────── */
  --egk-color-primary: var(--mud-palette-primary, #1976d2);
  --egk-color-primary-rgb: var(--mud-palette-primary-rgb, 25, 118, 210);
  --egk-color-primary-text: var(--mud-palette-primary-text, #fff);
  --egk-color-secondary: var(--mud-palette-secondary, #42a5f5);
  --egk-color-secondary-rgb: var(--mud-palette-secondary-rgb, 66, 165, 245);
  --egk-color-surface: var(--mud-palette-surface, #fff);
  --egk-color-surface-rgb: var(--mud-palette-surface-rgb, 255, 255, 255);
  --egk-color-background: var(--mud-palette-background, #f8f9fb);
  --egk-color-background-rgb: var(--mud-palette-background-rgb, 248, 249, 251);
  --egk-color-text: var(--mud-palette-text-primary, #1f2937);
  --egk-color-muted: var(--mud-palette-text-secondary, #6b7280);
  --egk-color-divider: var(--mud-palette-divider, rgba(0, 0, 0, 0.12));
  --egk-color-success: var(--mud-palette-success, #2e7d32);
  --egk-color-warning: var(--mud-palette-warning, #ed6c02);
  --egk-color-error: var(--mud-palette-error, #d32f2f);
  --egk-color-info: var(--mud-palette-info, #0288d1);

  /* On-gradient text helpers (gradients are always dark -> light surfaces) */
  --egk-on-brand: #ffffff;
  --egk-on-brand-muted: rgba(255, 255, 255, 0.82);
  --egk-on-brand-subtle: rgba(255, 255, 255, 0.62);

  /* Brand gradient — the ONE themeable gradient used by every hero/CTA band.
     Built from palette tokens so Theme Studio drives it. The dark anchor uses
     primary-darken; the light anchor blends toward secondary for depth. */
  --egk-gradient-brand: linear-gradient(135deg,
      var(--mud-palette-primary-darken, #1565c0) 0%,
      var(--mud-palette-primary, #1976d2) 48%,
      var(--mud-palette-secondary, #42a5f5) 100%);
  --egk-gradient-brand-vivid: linear-gradient(135deg,
      var(--mud-palette-primary, #1976d2) 0%,
      var(--mud-palette-secondary, #42a5f5) 100%);
  /* Subtle tinted wash for alternating sections */
  --egk-gradient-surface: linear-gradient(180deg,
      rgba(var(--egk-color-primary-rgb), 0.04) 0%,
      rgba(var(--egk-color-surface-rgb), 0) 100%);

  /* ── Spacing scale ─────────────────────────────────────────────────────── */
  --egk-space-0: 0;
  --egk-space-1: 0.25rem;
  --egk-space-2: 0.5rem;
  --egk-space-3: 0.75rem;
  --egk-space-4: 1rem;
  --egk-space-5: 1.25rem;
  --egk-space-6: 1.5rem;
  --egk-space-8: 2rem;
  --egk-space-10: 2.5rem;
  --egk-space-12: 3rem;
  --egk-space-16: 4rem;
  --egk-space-20: 5rem;
  --egk-space-24: 6rem;

  /* Section vertical rhythm + content width (fluid, consistent across pages) */
  --egk-section-y: clamp(3.5rem, 6vw, 6.5rem);
  --egk-section-y-sm: clamp(2rem, 4vw, 3.5rem);
  --egk-content-max: 1200px;
  --egk-prose-max: 70ch;

  /* ── Radius ────────────────────────────────────────────────────────────── */
  --egk-radius-sm: 0.375rem;
  --egk-radius-md: 0.625rem;
  --egk-radius-lg: 0.875rem;
  --egk-radius-xl: 1.25rem;
  --egk-radius-2xl: 1.75rem;
  --egk-radius-full: 9999px;

  /* ── Typography (fluid type scale) ─────────────────────────────────────── */
  --egk-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;
  --egk-font-mono: 'Cascadia Code', 'Fira Code', 'Consolas', ui-monospace, monospace;

  --egk-fs-display: clamp(2.25rem, 1.35rem + 3.4vw, 3.5rem);
  --egk-fs-h1: clamp(1.85rem, 1.25rem + 2.4vw, 2.75rem);
  --egk-fs-h2: clamp(1.5rem, 1.1rem + 1.7vw, 2.15rem);
  --egk-fs-h3: clamp(1.25rem, 1rem + 1vw, 1.6rem);
  --egk-fs-h4: clamp(1.1rem, 0.95rem + 0.6vw, 1.3rem);
  --egk-fs-body-lg: clamp(1.05rem, 1rem + 0.25vw, 1.2rem);
  --egk-fs-body: 1rem;
  --egk-fs-sm: 0.875rem;
  --egk-fs-xs: 0.75rem;

  --egk-lh-tight: 1.12;
  --egk-lh-snug: 1.3;
  --egk-lh-normal: 1.5;
  --egk-lh-relaxed: 1.7;

  --egk-tracking-tight: -0.02em;
  --egk-tracking-tighter: -0.03em;
  --egk-tracking-wide: 0.04em;
  --egk-tracking-caps: 0.14em;

  --egk-weight-medium: 500;
  --egk-weight-semibold: 600;
  --egk-weight-bold: 700;
  --egk-weight-extrabold: 800;

  /* ── Shadows / elevation ───────────────────────────────────────────────── */
  --egk-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.06);
  --egk-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.06);
  --egk-shadow-md: 0 6px 16px rgba(15, 23, 42, 0.10);
  --egk-shadow-lg: 0 14px 34px rgba(15, 23, 42, 0.14);
  --egk-shadow-xl: 0 28px 70px rgba(15, 23, 42, 0.22);
  /* Primary-tinted shadow for hovered interactive surfaces */
  --egk-shadow-primary: 0 14px 34px rgba(var(--egk-color-primary-rgb), 0.28);

  /* ── Z-index (authoritative scale; the high values intentionally beat
        MudBlazor's internal stacking — see z-index-fix.css) ───────────────── */
  --egk-z-base: 1;
  --egk-z-dropdown: 1000;
  --egk-z-sticky: 1100;
  --egk-z-appbar: 1200;
  --egk-z-fixed: 1200;
  --egk-z-overlay: 1250;
  --egk-z-drawer: 1300;
  --egk-z-toast: 1400;
  --egk-z-modal: 1500;
  --egk-z-nav-popover: 5008;
  --egk-z-popover: 12020;
  --egk-z-language-popover: 15010;
  /* Toasts/snackbars must always be the top-most interactive layer, above
     dialogs, popovers (12020) and the language popover (15010). */
  --egk-z-snackbar: 30000;

  /* ── Motion ────────────────────────────────────────────────────────────── */
  --egk-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --egk-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --egk-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --egk-dur-fast: 150ms;
  --egk-dur: 240ms;
  --egk-dur-slow: 400ms;

  /* ── Focus ─────────────────────────────────────────────────────────────── */
  --egk-focus-color: var(--egk-color-primary);
  --egk-focus-ring: 0 0 0 3px rgba(var(--egk-color-primary-rgb), 0.35);
}

/* NOTE: dark-mode color overrides are intentionally NOT defined here. Because
   every --egk color derives from --mud-palette-*, MudBlazor's own dark theme
   switch recolors these tokens automatically, keeping a single source of truth. */