/* PrepKiwi design tokens — v1.0
   Light is the default; dark applies via [data-theme="dark"] or the OS preference
   (unless the page opts out with [data-theme="light"]). */
:root, [data-theme="light"] {
  /* Brand */
  --pk-color-primary: #0E6B63;
  --pk-color-primary-hover: #0B5852;
  --pk-color-primary-pressed: #08443F;
  --pk-color-primary-soft: #E6F3F1;
  --pk-color-primary-soft-text: #0B4F49;
  --pk-color-on-primary: #FFFFFF;
  --pk-color-accent: #F5B935;
  --pk-color-accent-hover: #E8A91C;
  --pk-color-accent-soft: #FFF4D6;
  --pk-color-accent-strong: #FFE08A;
  --pk-color-on-accent: #2B2116;
  --pk-color-kiwi: #7A5230;
  --pk-color-kiwi-dark: #5E3E22;
  --pk-color-kiwi-light: #8C6240;
  --pk-color-beak: #D9B98A;

  /* Neutrals */
  --pk-color-bg: #F7F5EF;
  --pk-color-surface: #FFFFFF;
  --pk-color-surface-sunken: #F0ECE3;
  --pk-color-text: #26302D;
  --pk-color-text-muted: #55605C;
  --pk-color-text-inverse: #F7F5EF;
  --pk-color-border: #E1DCD0;
  --pk-color-border-strong: #CFC9BC;
  --pk-color-focus: #0E6B63;
  --pk-color-overlay: rgba(18, 26, 24, .48);

  /* Status — correct is light, wrong is dark: they differ in lightness, not just hue */
  --pk-color-success: #2E8B57;
  --pk-color-success-bg: #DDF3E5;
  --pk-color-success-text: #0F4A2B;
  --pk-color-danger: #7F1D2D;
  --pk-color-danger-bg: #7F1D2D;
  --pk-color-danger-text: #FFFFFF;
  --pk-color-danger-soft: #FBE7EA;
  --pk-color-danger-soft-text: #7F1D2D;
  --pk-color-warning: #B7791F;
  --pk-color-warning-bg: #FFF4D6;
  --pk-color-warning-text: #6B4407;
  --pk-color-info: #0E6B63;
  --pk-color-info-bg: #E6F3F1;
  --pk-color-info-text: #0B4F49;

  /* Typography */
  --pk-font-heading: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --pk-font-body: "Figtree", "Segoe UI", system-ui, sans-serif;
  --pk-font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --pk-weight-regular: 400;
  --pk-weight-medium: 500;
  --pk-weight-semibold: 600;
  --pk-weight-bold: 700;
  --pk-weight-heavy: 800;
  /* Fluid sizes use cqi: they follow the nearest .pk-shell container, or the viewport if none */
  --pk-text-xs: 0.75rem;
  --pk-text-sm: 0.875rem;
  --pk-text-base: 1rem;
  --pk-text-md: 1.125rem;
  --pk-text-lg: 1.25rem;
  --pk-text-xl: 1.5rem;
  --pk-text-2xl: clamp(1.625rem, 1.3rem + 1.2cqi, 2.125rem);
  --pk-text-3xl: clamp(2rem, 1.5rem + 2.2cqi, 3rem);
  --pk-text-4xl: clamp(2.5rem, 1.6rem + 3.6cqi, 4.25rem);
  --pk-leading-tight: 1.05;
  --pk-leading-snug: 1.25;
  --pk-leading-body: 1.55;
  --pk-tracking-heading: -0.02em;
  --pk-tracking-caps: 0.06em;

  /* Spacing (4px base) */
  --pk-space-1: 4px;
  --pk-space-2: 8px;
  --pk-space-3: 12px;
  --pk-space-4: 16px;
  --pk-space-5: 20px;
  --pk-space-6: 24px;
  --pk-space-8: 32px;
  --pk-space-10: 40px;
  --pk-space-12: 48px;
  --pk-space-16: 64px;
  --pk-space-20: 80px;
  --pk-space-24: 96px;

  /* Radius */
  --pk-radius-sm: 8px;
  --pk-radius-md: 12px;
  --pk-radius-lg: 20px;
  --pk-radius-xl: 28px;
  --pk-radius-pill: 999px;

  /* Shadows */
  --pk-shadow-sm: 0 1px 2px rgba(38, 48, 45, .06);
  --pk-shadow-md: 0 2px 0 rgba(38, 48, 45, .04), 0 8px 24px rgba(38, 48, 45, .08);
  --pk-shadow-lg: 0 4px 0 rgba(38, 48, 45, .04), 0 18px 44px rgba(38, 48, 45, .14);

  /* Layout */
  --pk-container: 1200px;
  --pk-container-narrow: 760px;
  --pk-gutter: clamp(16px, 4cqi, 40px);
  --pk-bp-sm: 480px;
  --pk-bp-md: 768px;
  --pk-bp-lg: 1024px;
  --pk-bp-xl: 1280px;

  /* Motion */
  --pk-ease: cubic-bezier(.2, .7, .2, 1);
  --pk-duration: 160ms;

  color-scheme: light;
}

[data-theme="dark"] {
  --pk-color-primary: #3CC2B2;
  --pk-color-primary-hover: #5ED3C5;
  --pk-color-primary-pressed: #2AA596;
  --pk-color-primary-soft: #163A36;
  --pk-color-primary-soft-text: #A6E8DF;
  --pk-color-on-primary: #0B1F1C;
  --pk-color-accent: #F5B935;
  --pk-color-accent-hover: #F8C95E;
  --pk-color-accent-soft: #3A3118;
  --pk-color-accent-strong: #5A4718;
  --pk-color-on-accent: #2B2116;
  --pk-color-bg: #121A18;
  --pk-color-surface: #18221F;
  --pk-color-surface-sunken: #0E1513;
  --pk-color-text: #E8EFEC;
  --pk-color-text-muted: #A9B7B2;
  --pk-color-text-inverse: #121A18;
  --pk-color-border: #2C3936;
  --pk-color-border-strong: #3B4A46;
  --pk-color-focus: #3CC2B2;
  --pk-color-overlay: rgba(0, 0, 0, .6);
  --pk-color-success: #BFE9CF;
  --pk-color-success-bg: #BFE9CF;
  --pk-color-success-text: #0D3B23;
  --pk-color-danger: #E2687E;
  --pk-color-danger-bg: #4D1220;
  --pk-color-danger-text: #FFD9DF;
  --pk-color-danger-soft: #3A1119;
  --pk-color-danger-soft-text: #FFB3C0;
  --pk-color-warning: #D9A030;
  --pk-color-warning-bg: #3A3118;
  --pk-color-warning-text: #FFD98A;
  --pk-color-info: #3CC2B2;
  --pk-color-info-bg: #163A36;
  --pk-color-info-text: #A6E8DF;
  --pk-shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
  --pk-shadow-md: 0 8px 24px rgba(0, 0, 0, .35);
  --pk-shadow-lg: 0 18px 44px rgba(0, 0, 0, .5);
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --pk-color-primary: #3CC2B2;
    --pk-color-primary-hover: #5ED3C5;
    --pk-color-primary-pressed: #2AA596;
    --pk-color-primary-soft: #163A36;
    --pk-color-primary-soft-text: #A6E8DF;
    --pk-color-on-primary: #0B1F1C;
    --pk-color-accent-hover: #F8C95E;
    --pk-color-accent-soft: #3A3118;
    --pk-color-accent-strong: #5A4718;
    --pk-color-bg: #121A18;
    --pk-color-surface: #18221F;
    --pk-color-surface-sunken: #0E1513;
    --pk-color-text: #E8EFEC;
    --pk-color-text-muted: #A9B7B2;
    --pk-color-text-inverse: #121A18;
    --pk-color-border: #2C3936;
    --pk-color-border-strong: #3B4A46;
    --pk-color-focus: #3CC2B2;
    --pk-color-overlay: rgba(0, 0, 0, .6);
    --pk-color-success: #BFE9CF;
    --pk-color-success-bg: #BFE9CF;
    --pk-color-success-text: #0D3B23;
    --pk-color-danger: #E2687E;
    --pk-color-danger-bg: #4D1220;
    --pk-color-danger-text: #FFD9DF;
    --pk-color-danger-soft: #3A1119;
    --pk-color-danger-soft-text: #FFB3C0;
    --pk-color-warning: #D9A030;
    --pk-color-warning-bg: #3A3118;
    --pk-color-warning-text: #FFD98A;
    --pk-color-info: #3CC2B2;
    --pk-color-info-bg: #163A36;
    --pk-color-info-text: #A6E8DF;
    --pk-shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
    --pk-shadow-md: 0 8px 24px rgba(0, 0, 0, .35);
    --pk-shadow-lg: 0 18px 44px rgba(0, 0, 0, .5);
    color-scheme: dark;
  }
}