:root {
  /* Light mode (default) — Garden Pop palette */
  --bg: #FBF7FF;                        /* page background — pale lilac-white */
  --bg-card: rgba(255,255,255,0.78);    /* glass card background */
  --bg-card-solid: #FFFFFF;             /* popovers, modals — needs full opacity */
  --bg-surface: #F3EDFC;                /* slightly deeper — inputs, surfaces */
  --text: #453D56;                      /* ink */
  --text-secondary: #8E86A3;            /* soft ink */
  --accent: #9B7DF5;                    /* grape */
  --accent-hover: #8463E8;
  --border: #E4DCF5;
  --border-light: #EFEAFA;
  --border-glass: rgba(255,255,255,0.9);

  /* Garden Pop pastels */
  --grape: #9B7DF5;
  --lavender: #B9A7F5;
  --peach: #FFC9B5;
  --coral: #FF8A7A;
  --mint: #B6E8CE;
  --leaf: #5FC58F;
  --sunny: #FFD93D;
  --skyblue: #BBD9FF;

  /* Signature gradients */
  --grad-hero: linear-gradient(120deg, var(--grape), var(--lavender));
  --grad-streak: linear-gradient(120deg, #FFE9A8, var(--sunny));
  --grad-progress: linear-gradient(90deg, var(--grape), var(--coral));

  /* Highlight colors */
  --hl-yellow: #FFF3B0;
  --hl-green: #C8F7C5;
  --hl-blue: #B8D4F0;
  --hl-pink: #F5C2D0;
  --hl-orange: #FDDCB5;
  --hl-yellow-strong: #FFE566;
  --hl-green-strong: #8BE88A;
  --hl-blue-strong: #7BB5E0;
  --hl-pink-strong: #F09AB5;
  --hl-orange-strong: #FCC088;

  /* Typography — 3-stack system */
  --font-display: 'Fredoka', system-ui, sans-serif;                       /* Article titles, display headings */
  --font-body: 'Newsreader', Georgia, 'Times New Roman', serif;           /* Long-form reading body */
  --font-heading: 'Fredoka', system-ui, sans-serif;                       /* Section headings, card titles */
  --font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace;
  --font-ui: 'Nunito', system-ui, -apple-system, sans-serif;              /* Labels, nav, meta */

  /* Type scale (1.25 ratio) */
  --text-xs:   0.75rem;    /* 12px — tiny labels, counts */
  --text-sm:   0.875rem;   /* 14px — secondary info, captions */
  --text-base: 1rem;       /* 16px — UI text, filters */
  --text-md:   1.125rem;   /* 18px — body reading */
  --text-lg:   1.375rem;   /* 22px — subheadings */
  --text-xl:   1.625rem;   /* 26px — page headings */
  --text-2xl:  2rem;       /* 32px — section display */
  --text-3xl:  2.5rem;     /* 40px — article titles */

  /* Sizing */
  --content-width: 680px;
  --content-wide: 680px;   /* demo's narrow single column */
  --font-size-base: 1.125rem;
  --line-height: 1.78;
  --line-height-tight: 1.25;
  --line-height-snug: 1.45;

  /* Shadows — lavender-tinted diffusion */
  --shadow-sm: 0 2px 8px rgba(120,100,180,0.08);
  --shadow-md: 0 10px 30px rgba(120,100,180,0.12);
  --shadow-lg: 0 18px 40px rgba(120,100,180,0.18);

  /* Easing curves — natural, not robotic */
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:    cubic-bezier(0.4, 0, 0.2, 1);

  /* Transitions */
  --transition:        0.2s var(--ease-out-quart);
  --transition-fast:   0.15s var(--ease-out-quart);
  --transition-slow:   0.35s var(--ease-out-quart);
  --duration-feedback: 120ms;     /* button press */
  --duration-state:    220ms;     /* hover, toggle */
  --duration-entrance: 320ms;     /* element reveal */
  --duration-exit:     180ms;     /* disappear */

  /* Radii — soft and friendly */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 22px;

  /* Semantic UI */
  --nav-height: 48px;
  --danger: #E0574B;
  --danger-hover: #C74338;
  --success: #5FC58F;
  --bg-blur: rgba(251, 247, 255, 0.88);
  --bg-overlay: rgba(69, 61, 86, 0.5);
  --focus-ring: 0 0 0 3px rgba(155, 125, 245, 0.35);
}

[data-theme="dark"] {
  --bg: #17121F;                        /* deep plum night */
  --bg-card: rgba(38, 30, 54, 0.78);    /* glass card — translucent plum */
  --bg-card-solid: #261E36;
  --bg-surface: #2E2542;
  --text: #EDE8F7;
  --text-secondary: #9A8FB5;
  --accent: #B9A7F5;                    /* lavender pops on dark */
  --accent-hover: #CBBCFA;
  --border: #3A2F52;
  --border-light: #2F2745;
  --border-glass: rgba(185, 167, 245, 0.18);

  --grad-hero: linear-gradient(120deg, #7A5CE0, #9B7DF5);
  --grad-streak: linear-gradient(120deg, #B98F1A, #E0BC2E);
  --grad-progress: linear-gradient(90deg, #9B7DF5, #E0705F);

  --hl-yellow: rgba(255,243,176,0.25);
  --hl-green: rgba(200,247,197,0.2);
  --hl-blue: rgba(184,212,240,0.2);
  --hl-pink: rgba(245,194,208,0.2);
  --hl-orange: rgba(253,220,181,0.2);
  --hl-yellow-strong: rgba(255,229,102,0.35);
  --hl-green-strong: rgba(139,232,138,0.3);
  --hl-blue-strong: rgba(123,181,224,0.3);
  --hl-pink-strong: rgba(240,154,181,0.3);
  --hl-orange-strong: rgba(252,192,136,0.3);

  --shadow-sm: 0 2px 8px rgba(0,0,0,0.25);
  --shadow-md: 0 10px 30px rgba(0,0,0,0.35);
  --shadow-lg: 0 18px 40px rgba(0,0,0,0.45);

  --danger: #E57373;
  --danger-hover: #EF9A9A;
  --success: #7ED9A9;
  --bg-blur: rgba(23, 18, 31, 0.88);
  --bg-overlay: rgba(10, 7, 15, 0.65);
  --focus-ring: 0 0 0 3px rgba(185, 167, 245, 0.4);
}