/* =========================================================
   VTECH-HUB REDESIGN v2 — DESIGN TOKENS
   Trust/Corporate + Tech Touch
   Locally hosted: Inter + Source Serif 4
   ========================================================= */

@import url('/fonts/fonts-local.css');

:root {
  /* ── Typography ── */
  --font-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono:  'JetBrains Mono', 'SF Mono', Consolas, monospace;

  --text-xs:   0.75rem;   /* 12px */
  --text-sm:   0.875rem;  /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-lg:   1.125rem;  /* 18px */
  --text-xl:   1.25rem;   /* 20px */
  --text-2xl:  1.5rem;    /* 24px */
  --text-3xl:  1.875rem;  /* 30px */
  --text-4xl:  2.25rem;   /* 36px */
  --text-5xl:  3rem;      /* 48px */
  --text-6xl:  3.75rem;   /* 60px */
  --text-7xl:  4.5rem;    /* 72px */

  --leading-none:   1;
  --leading-tight:  1.2;
  --leading-snug:   1.35;
  --leading-normal: 1.6;
  --leading-relaxed:1.75;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.05em;
  --tracking-wider:  0.1em;

  /* ── Color: Backgrounds ── */
  --bg-page:    #0B0F17;
  --bg-surface: #121826;
  --bg-card:    #1A2232;
  --bg-hover:   #243042;
  --bg-active:  #2D3B52;
  --bg-input:   rgba(18, 24, 38, 0.6);

  /* ── Color: Text ── */
  --text-primary:   #F7F9FC;
  --text-secondary: #9AA6B8;
  --text-muted:     #64748B;
  --text-inverse:   #0B0F17;

  /* ── Color: Accents ── */
  --gold:        #D4A853;
  --gold-soft:   rgba(212, 168, 83, 0.15);
  --gold-glow:   rgba(212, 168, 83, 0.35);
  --gold-dark:   #A88338;

  --indigo:      #6366F1;
  --indigo-400:  #818CF8;
  --indigo-600:  #4F46E5;
  --indigo-soft: rgba(99, 102, 241, 0.12);
  --indigo-glow: rgba(99, 102, 241, 0.35);

  --success: #22C55E;
  --warning: #F59E0B;
  --error:   #EF4444;
  --info:    #3B82F6;

  /* ── Borders ── */
  --border:       rgba(255, 255, 255, 0.08);
  --border-strong:rgba(255, 255, 255, 0.14);
  --border-gold:  rgba(212, 168, 83, 0.25);
  --border-indigo:rgba(99, 102, 241, 0.3);

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

  /* ── Radius ── */
  --radius-sm:  0.375rem;
  --radius-md:  0.5rem;
  --radius-lg:  0.75rem;
  --radius-xl:  1rem;
  --radius-2xl: 1.25rem;
  --radius-3xl: 1.5rem;
  --radius-full:9999px;

  /* ── Shadows ── */
  --shadow-xs:   0 1px 2px rgba(0, 0, 0, 0.12);
  --shadow-sm:   0 2px 4px rgba(0, 0, 0, 0.16);
  --shadow-md:   0 8px 16px rgba(0, 0, 0, 0.24);
  --shadow-lg:   0 16px 32px rgba(0, 0, 0, 0.32);
  --shadow-xl:   0 24px 48px rgba(0, 0, 0, 0.4);

  --glow-gold:   0 0 24px var(--gold-glow);
  --glow-indigo: 0 0 24px var(--indigo-glow);

  /* ── 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:   400ms;
  --duration-slower: 600ms;

  /* ── Layout ── */
  --container-sm:  640px;
  --container-md:  768px;
  --container-lg:  1024px;
  --container-xl:  1280px;
  --container-2xl: 1440px;

  --nav-height: 72px;
}