/**
 * @file tokens.css
 * Design tokens for the Wizard theme.
 * All CSS custom properties live here — imported by global.css and components.
 */

:root {

  /* ── Colors ── */
  --color-primary:         #1E3A5F;   /* Deep Blue — brand anchor */
  --color-accent:          #F4722B;   /* Vibrant Orange — CTAs, highlights */
  --color-accent-hover:    #E05F1E;   /* Orange dark — hover state */
  --color-lavender:        #C4B5E8;   /* Lavender — decorative accent */
  --color-pink:            #F7C5C5;   /* Soft Pink — decorative accent */
  --color-offwhite:        #F9F8FF;   /* Off-White — neutral light bg */
  --color-text:            #1A1A2E;   /* Near-Black — body text */
  --color-text-muted:      #6B7280;   /* Mid Gray — secondary text */
  --color-white:           #FFFFFF;

  /* Section background tints (alternating rhythm) */
  --color-bg-default:      #FFFFFF;
  --color-bg-lavender:     #F0EDF9;   /* Lavender tint */
  --color-bg-pink:         #FDF0F0;   /* Pink tint */
  --color-bg-offwhite:     #F9F8FF;

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

  --font-size-base:        1rem;      /* 16px */
  --font-size-sm:          0.875rem;  /* 14px */
  --font-size-xs:          0.8rem;    /* ~13px */
  --font-size-lg:          1.125rem;  /* 18px */
  --font-size-xl:          1.25rem;   /* 20px */
  --font-size-2xl:         1.5rem;    /* 24px */
  --font-size-3xl:         2rem;      /* 32px */
  --font-size-4xl:         2.5rem;    /* 40px */
  --font-size-5xl:         3rem;      /* 48px */

  --font-weight-regular:   400;
  --font-weight-medium:    500;
  --font-weight-semibold:  600;
  --font-weight-bold:      700;
  --font-weight-extrabold: 800;

  --line-height-tight:     1.2;
  --line-height-base:      1.6;

  --letter-spacing-tight:  -0.5px;
  --letter-spacing-wide:   1.5px;

  /* ── Spacing ── */
  --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;
  --space-28:  112px;

  /* ── Layout ── */
  --container-max:         1100px;
  --section-padding-y:     var(--space-20);
  --section-padding-x:     var(--space-12);
  --nav-height:            64px;

  /* ── Borders & Radius ── */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  /* ── Shadows ── */
  --shadow-sm:   0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md:   0 4px 12px rgba(0, 0, 0, 0.10);
  --shadow-lg:   0 8px 28px rgba(0, 0, 0, 0.12);

  /* ── Transitions ── */
  --transition-fast:   0.15s ease;
  --transition-base:   0.2s ease;
  --transition-slow:   0.4s ease;

  /* ── Z-index ── */
  --z-nav:     100;
  --z-modal:   200;
  --z-toast:   300;
}