:root {
  --bg: #0F140F;
  --panel: #18211A;
  --panel-2: #1F2B22;
  --ink: #E6EFE4;
  --muted: #9DB3A3;
  --line: #2B3A2F;
  --brand: #43C463;
  --brand-dark: #63D67E;
  --on-brand: #0B130C;
  --accent: #F2647A;
  --accent-dark: #F2647A;
  --pink: #F2647A;
  --ok: #4FB95E;
  --diamond: #56C5E6;
  --gem: #7FC04A;
  --sun: #F2C14E;
  --warn: #E8B23C;
  --danger: #F0746E;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 30px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 6px 14px rgba(0, 0, 0, 0.5), 0 22px 50px rgba(0, 0, 0, 0.55);
  --e-1: 0 1px 2px rgba(0, 0, 0, 0.32), 0 4px 14px rgba(0, 0, 0, 0.28);
  --e-2: var(--shadow);
  --e-3: var(--shadow-lg);
  --radius: 16px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 24px;
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 40px;
  --s-8: 48px;
  --seed: #141414;
  --facet-grad: conic-gradient(from 210deg at 30% 25%, color-mix(in srgb, var(--brand) 60%, transparent), color-mix(in srgb, var(--pink) 55%, transparent) 140deg, color-mix(in srgb, var(--sun) 40%, transparent) 250deg, color-mix(in srgb, var(--brand) 60%, transparent) 360deg);
  --display: "Fredoka", "Segoe UI", system-ui, sans-serif;
  --body: "Nunito", "Segoe UI", system-ui, -apple-system, sans-serif;
  --surface: var(--panel);
  --surface-2: var(--panel-2);
  --surface-3: #26342A;
  --text: var(--ink);
  --text-2: color-mix(in srgb, var(--ink) 76%, var(--muted));
  --text-muted: var(--muted);
  --fs-display: clamp(32px, 4.5vw, 44px);
  --fs-h1: 30px;
  --fs-h2: 23px;
  --fs-h3: 18px;
  --fs-lg: 17px;
  --fs-base: 16px;
  --fs-sm: 14px;
  --fs-cap: 12.5px;
  --lh-tight: 1.18;
  --lh: 1.55;
  --measure: 72ch;
}

:root[data-theme="light"] {
  --bg: #F1F8EF;
  --panel: #FFFFFF;
  --panel-2: #EAF4E8;
  --ink: #16231A;
  --muted: #5C7060;
  --line: #D6E4D6;
  --brand: #2E9E4F;
  --brand-dark: #268A44;
  --on-brand: #FFFFFF;
  --accent: #E14E68;
  --accent-dark: #C73D55;
  --pink: #E14E68;
  --ok: #1E8E3E;
  --diamond: #2E86DE;
  --gem: #16A085;
  --sun: #E0890C;
  --warn: #B9770E;
  --danger: #C0392B;
  --shadow: 0 1px 2px rgba(31, 60, 38, 0.06), 0 10px 30px rgba(31, 60, 38, 0.10);
  --shadow-lg: 0 6px 14px rgba(31, 60, 38, 0.10), 0 22px 50px rgba(31, 60, 38, 0.14);
  --e-1: 0 1px 2px rgba(31, 60, 38, 0.05), 0 4px 14px rgba(31, 60, 38, 0.08);
  --e-2: var(--shadow);
  --e-3: var(--shadow-lg);
  --surface-3: #E1EFDF;
}