@layer tokens {
  :root {
    /* Colors */
    --color-primary:   #5BA4D4;
    --color-secondary: #8ECAE6;
    --color-surface:   #F0F7FF;
    --color-card:      #FFFFFF;
    --color-text:      #1A2840;
    --color-muted:     #6A8FAD;
    --color-warning:   #F4A261;
    --color-danger:    #E76F51;
    --color-border:    #C8DCF0;

    /* Typography */
    --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-size-sm:   clamp(0.9rem,  0.85rem + 0.15vw, 1rem);
    --font-size-base: clamp(1.125rem, 1.05rem + 0.2vw,  1.25rem);
    --font-size-lg:   clamp(1.25rem,  1.15rem + 0.3vw,  1.5rem);
    --font-size-xl:   clamp(1.5rem,   1.3rem  + 0.5vw,  2rem);
    --font-size-2xl:  clamp(1.875rem, 1.6rem  + 0.7vw,  2.5rem);

    --line-height-body:    1.5;
    --line-height-heading: 1.2;

    /* Spacing (base unit: 0.5rem) */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-12: 3rem;
    --space-16: 4rem;

    /* Radius */
    --radius-sm:   0.5rem;
    --radius-md:   0.75rem;
    --radius-lg:   1rem;
    --radius-full: 999rem;

    /* 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 24px rgba(0, 0, 0, 0.12);

    /* Transitions */
    --transition: 150ms ease;

    /* Tap target minimum (3.5rem = 56px at default root) */
    --tap-min: 3.5rem;

    /* Focus ring */
    --focus-ring: 3px solid var(--color-primary);
    --focus-offset: 3px;
  }

  @media (prefers-contrast: more) {
    :root {
      --color-text:   #000000;
      --color-muted:  #2A4A68;
      --color-border: #3A6080;
    }
  }

  @media (prefers-color-scheme: dark) {
    :root {
      --color-surface: #0F1825;
      --color-card:    #192535;
      --color-text:    #E8F2F8;
      --color-muted:   #8AACC4;
      --color-border:  #243850;
    }
  }
}