/* ==========================================================================
   Design Tokens — inspired by Sanity design system (light theme variant)
   Source: ../sanity-DESIGN.md
   ========================================================================== */

:root {
  /* ---------- Color: Primary Brand (light theme) ---------- */
  --color-bg:           #ffffff;   /* Main canvas */
  --color-bg-pure:      #ffffff;   /* Pure white (overlay/scroll) */
  --color-cta:          #F47B27;   /* Orange CTA (from logo) */
  --color-cta-hover:    #0052ef;   /* Hover goes blue */

  /* ---------- Color: Accent & Interactive ---------- */
  --color-blue:         #0052ef;   /* Electric blue (hover, focus) */
  --color-blue-light:   #55beff;
  --color-blue-tint:    #f0f7ff;   /* Light blue tint (input focus bg) */
  --color-green:        #19d600;
  --color-magenta:      #ff00ff;
  --color-amber:        #F47B27;   /* Unified with CTA orange */

  /* ---------- Color: Surface ---------- */
  --color-surface:      #f5f5f5;   /* Card / form background */
  --color-surface-2:    #e5e5e5;   /* Tertiary surface / visible borders */
  --color-white:        #ffffff;   /* Used as text on dark/colored bg */
  --color-light:        #ededed;

  /* ---------- Color: Text ---------- */
  --color-text-1:       #0b0b0b;   /* Primary text on light surfaces */
  --color-text-2:       #4a4a4a;   /* Secondary text */
  --color-text-3:       #797979;   /* Tertiary text (metadata) */

  /* ---------- Color: Semantic ---------- */
  --color-error:        #dd0000;
  --color-focus-ring:   #0052ef;
  --color-success:      #19d600;

  /* ---------- Color: Border ---------- */
  --color-border-subtle:  #e5e5e5;
  --color-border-visible: #d4d4d4;
  --color-border-accent:  var(--color-amber);

  /* ---------- Color: Overlays (always dark for focus) ---------- */
  --color-overlay-strong: rgba(0, 0, 0, 0.92);
  --color-overlay-soft:   rgba(0, 0, 0, 0.7);
  --color-overlay-tint:   rgba(255, 255, 255, 0.7);

  /* ---------- Font Families ---------- */
  --font-display: 'Inter', system-ui, -apple-system, BlinkMacSystemFont,
                  'Segoe UI', Roboto, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo,
                  Consolas, monospace;

  /* ---------- Type Scale (fluid, mobile-first) ---------- */
  --fs-display:   clamp(2.375rem, 5vw + 1rem, 7rem);
  --fs-h1:        clamp(2.25rem, 3.5vw + 0.5rem, 4.5rem);
  --fs-h2:        clamp(1.75rem, 2.5vw + 0.5rem, 3rem);
  --fs-h3:        clamp(1.375rem, 1.5vw + 0.5rem, 2.375rem);
  --fs-h4:        clamp(1.125rem, 1vw + 0.5rem, 1.5rem);
  --fs-body-lg:   1.125rem;
  --fs-body:      1rem;
  --fs-body-sm:   0.9375rem;
  --fs-caption:   0.8125rem;
  --fs-small:     0.75rem;
  --fs-micro:     0.6875rem;

  /* ---------- Line Heights ---------- */
  --lh-display:   1.00;
  --lh-h1:        1.05;
  --lh-h2:        1.08;
  --lh-h3:        1.10;
  --lh-h4:        1.24;
  --lh-body:      1.50;
  --lh-tight:     1.20;

  /* ---------- Letter Spacing ---------- */
  --ls-display:   -0.04em;
  --ls-h1:        -0.035em;
  --ls-h2:        -0.035em;
  --ls-h3:        -0.03em;
  --ls-h4:        -0.01em;
  --ls-body:      normal;
  --ls-uppercase: 0.05em;

  /* ---------- Spacing (8px base) ---------- */
  --space-1:  1px;
  --space-2:  2px;
  --space-3:  4px;
  --space-4:  6px;
  --space-5:  8px;
  --space-6:  12px;
  --space-7:  16px;
  --space-8:  24px;
  --space-9:  32px;
  --space-10: 48px;
  --space-11: 64px;
  --space-12: clamp(64px, 8vw, 120px);

  /* ---------- Border Radius ---------- */
  --radius-xs:   3px;
  --radius-sm:   5px;
  --radius-md:   6px;
  --radius-lg:   12px;
  --radius-pill: 99999px;

  /* ---------- Shadows (ring-based only) ---------- */
  --shadow-1: 0 0 0 1px var(--color-border-visible);
  --shadow-focus: 0 0 0 2px var(--color-focus-ring);
  --shadow-overlay: 0 8px 32px rgba(0, 0, 0, 0.3);

  /* ---------- Layout ---------- */
  --container-max: 1440px;
  --gutter-mobile: 16px;
  --gutter-desktop: 32px;
  --section-pad-y: clamp(48px, 8vw, 120px);
  --header-height: 64px;

  /* ---------- Transitions ---------- */
  --t-fast: 120ms ease;
  --t-base: 200ms ease;
  --t-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------- Reduced Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast: 0ms;
    --t-base: 0ms;
    --t-slow: 0ms;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}