/* ============================================================
   WEBGOX DESIGN SYSTEM — tokens
   Single source of truth for colour, type, spacing, radius, motion.
   Loaded before styles.css. Never hard-code these values elsewhere.
   ============================================================ */

:root {
  /* ---- brand ----
     #1E63FF is the logo blue and stays the primary brand colour.
     Violet is available as a secondary accent only (gradients, highlights). */
  --brand:         #1E63FF;
  --brand-hover:   #1550DB;
  --brand-light:   #5AA9FF;
  --brand-tint:    rgba(30, 99, 255, 0.08);
  --accent-violet: #6701FE;
  --brand-gradient: linear-gradient(135deg, #1E63FF 0%, #6701FE 100%);

  /* ---- surfaces ---- */
  --bg:            #EDEDED;
  --surface:       #FFFFFF;
  --surface-alt:   #E4E4E4;
  --surface-dark:  #0B0B0F;
  --surface-dark2: #14151A;

  /* ---- text ---- */
  --text:          #111111;
  --text-secondary:#6B6B6B;
  --text-muted:    #9A9A9A;
  --text-on-dark:  #FFFFFF;
  --text-on-dark-2:rgba(255, 255, 255, 0.72);

  --divider:       #DADADA;
  --divider-soft:  rgba(17, 17, 17, 0.12);

  /* ---- state ---- */
  --ok:            #0A7A52;
  --ok-bg:         rgba(6, 214, 160, 0.12);
  --err:           #B3243F;
  --err-bg:        rgba(239, 71, 111, 0.12);

  /* ---- type ---- */
  --font-display: 'Sora', 'Poppins', -apple-system, sans-serif;
  --font-body:    'Inter', -apple-system, sans-serif;

  /* fluid scale — clamp(min, preferred, max) */
  --fs-display: clamp(38px, 7vw, 76px);
  --fs-h1:      clamp(34px, 5.5vw, 60px);
  --fs-h2:      clamp(26px, 3.4vw, 40px);
  --fs-h3:      clamp(19px, 2vw, 24px);
  --fs-lead:    clamp(16px, 1.6vw, 19px);
  --fs-body:    15px;
  --fs-sm:      13px;
  --fs-xs:      11px;

  --lh-tight:   1.02;
  --lh-heading: 1.15;
  --lh-body:    1.7;

  /* ---- spacing (8pt) ---- */
  --s-1:  4px;   --s-2:  8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 24px;   --s-6: 32px;   --s-7: 40px;  --s-8: 56px;
  --s-9: 72px;   --s-10: 96px;  --s-11: 128px;

  --section-y: clamp(56px, 8vw, 104px);

  /* ---- radius ---- */
  --r-sm:   10px;
  --r-md:   16px;
  --r-lg:   28px;
  --r-xl:   40px;
  --r-pill: 9999px;

  /* ---- elevation ---- */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.07);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.07);
  --shadow-lg: 0 18px 44px rgba(0,0,0,0.12);
  --shadow-brand: 0 16px 38px rgba(30, 99, 255, 0.24);

  /* ---- motion ---- */
  --ease:      cubic-bezier(0.22, 0.61, 0.36, 1);
  --t-fast:    0.18s;
  --t-base:    0.28s;
  --t-slow:    0.5s;

  --container: 1200px;
  --container-narrow: 780px;

  /* legacy aliases — older rules still reference these */
  --purple: var(--brand);
  --purple-light: var(--brand-light);
  --bg-card: var(--surface-alt);
  --dark-card: var(--surface-dark);
  --radius-pill: var(--r-pill);
  --radius-lg: var(--r-xl);
  --radius-md: var(--r-md);
  --radius-sm: 12px;
}

/* Respect the OS "reduce motion" setting — §28 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .fade-in { opacity: 1 !important; transform: none !important; }
}