/* Generated by design/tokens/build-css.mjs from tokens.json. Do not edit; run: node design/build.mjs */

:root {
  --color-plum-50: #F7F3FA;
  --color-plum-100: #EEE6F4;
  --color-plum-200: #DDCDE9;
  --color-plum-300: #C4AAD8;
  --color-plum-400: #A585C0;
  --color-plum-500: #8A68A8;
  --color-plum-600: #735390;
  --color-plum-700: #5E4377;
  --color-plum-800: #49345C;
  --color-plum-900: #342542;
  --color-plum-950: #22182C;
  --color-neutral-0: #FFFFFF;
  --color-neutral-50: #FAF9FB;
  --color-neutral-100: #F3F1F5;
  --color-neutral-200: #E6E3EA;
  --color-neutral-300: #D1CCD7;
  --color-neutral-400: #A9A2B2;
  --color-neutral-500: #776F80;
  --color-neutral-600: #625B6B;
  --color-neutral-700: #4A4452;
  --color-neutral-800: #332E39;
  --color-neutral-850: #2A2530;
  --color-neutral-900: #221E27;
  --color-neutral-950: #16131A;
  --color-green-50: #EEF7F1;
  --color-green-300: #8FD1A8;
  --color-green-600: #2F7A4D;
  --color-green-900: #17301F;
  --color-amber-50: #FDF5E7;
  --color-amber-300: #F2C46B;
  --color-amber-600: #9A5B00;
  --color-amber-900: #3A2A10;
  --color-red-50: #FCEEEE;
  --color-red-300: #F2A19B;
  --color-red-600: #B3261E;
  --color-red-900: #3D1715;
  --color-blue-50: #EDF3FB;
  --color-blue-300: #9DBEEA;
  --color-blue-600: #2B5FA6;
  --color-blue-900: #15263F;
  --color-rose-50: #FBEAF0;
  --color-rose-300: #F08FAE;
  --color-rose-600: #B23560;
  --color-rose-900: #3D1A26;
  --color-teal-50: #E6F4F1;
  --color-teal-300: #7FD0C3;
  --color-teal-600: #22705F;
  --color-teal-900: #133632;
  --color-gold-50: #FBF1E1;
  --color-gold-300: #E9C27A;
  --color-gold-600: #93600F;
  --color-gold-900: #382811;
  --color-series-1: #2A78D6;
  --color-series-2: #EB6834;
  --color-series-3: #1BAF7A;
  --color-series-4: #EDA100;
  --color-series-1-dark: #3987E5;
  --color-series-2-dark: #D95926;
  --color-series-3-dark: #199E70;
  --color-series-4-dark: #C98500;
  --color-phase-mark-menstrual: #B92C63;
  --color-phase-mark-follicular: #03642B;
  --color-phase-mark-ovulation: #A27409;
  --color-phase-mark-luteal: #4E4FA1;
  --color-phase-mark-menstrual-dark: #D92757;
  --color-phase-mark-follicular-dark: #1CA89E;
  --color-phase-mark-ovulation-dark: #C68204;
  --color-phase-mark-luteal-dark: #9680E0;
  --color-indigo-50: #ECECF8;
  --color-indigo-300: #A9A9EC;
  --color-indigo-600: #4F4FA3;
  --color-indigo-900: #23234A;
  --space-none: 0px;
  --space-3xs: 2px;
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 20px;
  --space-xl: 24px;
  --space-2xl: 32px;
  --space-3xl: 40px;
  --space-4xl: 48px;
  --space-5xl: 64px;
  --radius-none: 0px;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 999px;
  --size-touch-min: 48px;
  --size-control-lg: 52px;
  --size-control-sm: 40px;
  --size-control-icon: 44px;
  --size-icon-md: 24px;
  --size-icon-sm: 20px;
  --font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --type-display: 700 32px/40px var(--font-family);
  --type-title-lg: 700 24px/30px var(--font-family);
  --type-title-md: 600 20px/26px var(--font-family);
  --type-title-sm: 600 17px/22px var(--font-family);
  --type-question: 600 19px/26px var(--font-family);
  --type-body-lg: 400 17px/26px var(--font-family);
  --type-body-md: 400 15px/22px var(--font-family);
  --type-body-sm: 400 13px/18px var(--font-family);
  --type-label-lg: 600 16px/20px var(--font-family);
  --type-label-md: 500 14px/18px var(--font-family);
  --type-label-sm: 600 12px/16px var(--font-family);
  --type-caption: 400 12px/16px var(--font-family);
  --shadow-elevation-1: 0px 1px 2px 0px rgb(34 24 44 / 0.059), 0px 2px 8px 0px rgb(34 24 44 / 0.039);
  --shadow-elevation-2: 0px 4px 14px 0px rgb(34 24 44 / 0.122);
  --shadow-elevation-3: 0px -2px 12px 0px rgb(34 24 44 / 0.078);
  --color-brand-background: var(--color-plum-600);
  --color-brand-foreground: var(--color-neutral-0);
}

:root, [data-theme="light"] {
  color-scheme: light;
  --color-bg-canvas: var(--color-plum-50);
  --color-bg-canvas-rgb: 247 243 250;
  --color-bg-surface: var(--color-neutral-0);
  --color-bg-surface-rgb: 255 255 255;
  --color-bg-surface-subtle: var(--color-neutral-100);
  --color-bg-surface-subtle-rgb: 243 241 245;
  --color-bg-surface-accent: var(--color-plum-100);
  --color-bg-surface-accent-rgb: 238 230 244;
  --color-bg-scrim: var(--color-neutral-950);
  --color-bg-scrim-rgb: 22 19 26;
  --color-text-primary: var(--color-neutral-900);
  --color-text-primary-rgb: 34 30 39;
  --color-text-secondary: var(--color-neutral-600);
  --color-text-secondary-rgb: 98 91 107;
  --color-text-tertiary: var(--color-neutral-500);
  --color-text-tertiary-rgb: 119 111 128;
  --color-text-accent: var(--color-plum-700);
  --color-text-accent-rgb: 94 67 119;
  --color-text-on-accent: var(--color-neutral-0);
  --color-text-on-accent-rgb: 255 255 255;
  --color-text-disabled: var(--color-neutral-400);
  --color-text-disabled-rgb: 169 162 178;
  --color-border-subtle: var(--color-neutral-200);
  --color-border-subtle-rgb: 230 227 234;
  --color-border-default: var(--color-neutral-300);
  --color-border-default-rgb: 209 204 215;
  --color-border-strong: var(--color-neutral-500);
  --color-border-strong-rgb: 119 111 128;
  --color-border-focus: var(--color-plum-500);
  --color-border-focus-rgb: 138 104 168;
  --color-accent-default: var(--color-plum-600);
  --color-accent-default-rgb: 115 83 144;
  --color-accent-pressed: var(--color-plum-800);
  --color-accent-pressed-rgb: 73 52 92;
  --color-accent-subtle: var(--color-plum-100);
  --color-accent-subtle-rgb: 238 230 244;
  --color-control-track-off: var(--color-neutral-300);
  --color-control-track-off-rgb: 209 204 215;
  --color-control-thumb: var(--color-neutral-0);
  --color-control-thumb-rgb: 255 255 255;
  --color-control-disabled-bg: var(--color-neutral-200);
  --color-control-disabled-bg-rgb: 230 227 234;
  --color-status-success-fg: var(--color-green-600);
  --color-status-success-fg-rgb: 47 122 77;
  --color-status-success-bg: var(--color-green-50);
  --color-status-success-bg-rgb: 238 247 241;
  --color-status-warning-fg: var(--color-amber-600);
  --color-status-warning-fg-rgb: 154 91 0;
  --color-status-warning-bg: var(--color-amber-50);
  --color-status-warning-bg-rgb: 253 245 231;
  --color-status-danger-fg: var(--color-red-600);
  --color-status-danger-fg-rgb: 179 38 30;
  --color-status-danger-bg: var(--color-red-50);
  --color-status-danger-bg-rgb: 252 238 238;
  --color-status-danger-solid: var(--color-red-600);
  --color-status-danger-solid-rgb: 179 38 30;
  --color-status-danger-on-solid: var(--color-neutral-0);
  --color-status-danger-on-solid-rgb: 255 255 255;
  --color-status-info-fg: var(--color-blue-600);
  --color-status-info-fg-rgb: 43 95 166;
  --color-status-info-bg: var(--color-blue-50);
  --color-status-info-bg-rgb: 237 243 251;
  --color-phase-menstrual-fg: var(--color-rose-600);
  --color-phase-menstrual-fg-rgb: 178 53 96;
  --color-phase-menstrual-bg: var(--color-rose-50);
  --color-phase-menstrual-bg-rgb: 251 234 240;
  --color-phase-menstrual-mark: var(--color-phase-mark-menstrual);
  --color-phase-menstrual-mark-rgb: 185 44 99;
  --color-phase-follicular-fg: var(--color-teal-600);
  --color-phase-follicular-fg-rgb: 34 112 95;
  --color-phase-follicular-bg: var(--color-teal-50);
  --color-phase-follicular-bg-rgb: 230 244 241;
  --color-phase-follicular-mark: var(--color-phase-mark-follicular);
  --color-phase-follicular-mark-rgb: 3 100 43;
  --color-phase-ovulation-fg: var(--color-gold-600);
  --color-phase-ovulation-fg-rgb: 147 96 15;
  --color-phase-ovulation-bg: var(--color-gold-50);
  --color-phase-ovulation-bg-rgb: 251 241 225;
  --color-phase-ovulation-mark: var(--color-phase-mark-ovulation);
  --color-phase-ovulation-mark-rgb: 162 116 9;
  --color-phase-luteal-fg: var(--color-indigo-600);
  --color-phase-luteal-fg-rgb: 79 79 163;
  --color-phase-luteal-bg: var(--color-indigo-50);
  --color-phase-luteal-bg-rgb: 236 236 248;
  --color-phase-luteal-mark: var(--color-phase-mark-luteal);
  --color-phase-luteal-mark-rgb: 78 79 161;
  --color-chart-series-1: var(--color-series-1);
  --color-chart-series-1-rgb: 42 120 214;
  --color-chart-series-2: var(--color-series-2);
  --color-chart-series-2-rgb: 235 104 52;
  --color-chart-series-3: var(--color-series-3);
  --color-chart-series-3-rgb: 27 175 122;
  --color-chart-series-4: var(--color-series-4);
  --color-chart-series-4-rgb: 237 161 0;
}

[data-theme="dark"] {
  color-scheme: dark;
  --color-bg-canvas: var(--color-neutral-950);
  --color-bg-canvas-rgb: 22 19 26;
  --color-bg-surface: var(--color-neutral-900);
  --color-bg-surface-rgb: 34 30 39;
  --color-bg-surface-subtle: var(--color-neutral-850);
  --color-bg-surface-subtle-rgb: 42 37 48;
  --color-bg-surface-accent: var(--color-plum-900);
  --color-bg-surface-accent-rgb: 52 37 66;
  --color-bg-scrim: var(--color-neutral-950);
  --color-bg-scrim-rgb: 22 19 26;
  --color-text-primary: var(--color-neutral-50);
  --color-text-primary-rgb: 250 249 251;
  --color-text-secondary: var(--color-neutral-300);
  --color-text-secondary-rgb: 209 204 215;
  --color-text-tertiary: var(--color-neutral-400);
  --color-text-tertiary-rgb: 169 162 178;
  --color-text-accent: var(--color-plum-300);
  --color-text-accent-rgb: 196 170 216;
  --color-text-on-accent: var(--color-plum-950);
  --color-text-on-accent-rgb: 34 24 44;
  --color-text-disabled: var(--color-neutral-600);
  --color-text-disabled-rgb: 98 91 107;
  --color-border-subtle: var(--color-neutral-800);
  --color-border-subtle-rgb: 51 46 57;
  --color-border-default: var(--color-neutral-700);
  --color-border-default-rgb: 74 68 82;
  --color-border-strong: var(--color-neutral-500);
  --color-border-strong-rgb: 119 111 128;
  --color-border-focus: var(--color-plum-300);
  --color-border-focus-rgb: 196 170 216;
  --color-accent-default: var(--color-plum-300);
  --color-accent-default-rgb: 196 170 216;
  --color-accent-pressed: var(--color-plum-400);
  --color-accent-pressed-rgb: 165 133 192;
  --color-accent-subtle: var(--color-plum-900);
  --color-accent-subtle-rgb: 52 37 66;
  --color-control-track-off: var(--color-neutral-700);
  --color-control-track-off-rgb: 74 68 82;
  --color-control-thumb: var(--color-neutral-50);
  --color-control-thumb-rgb: 250 249 251;
  --color-control-disabled-bg: var(--color-neutral-800);
  --color-control-disabled-bg-rgb: 51 46 57;
  --color-status-success-fg: var(--color-green-300);
  --color-status-success-fg-rgb: 143 209 168;
  --color-status-success-bg: var(--color-green-900);
  --color-status-success-bg-rgb: 23 48 31;
  --color-status-warning-fg: var(--color-amber-300);
  --color-status-warning-fg-rgb: 242 196 107;
  --color-status-warning-bg: var(--color-amber-900);
  --color-status-warning-bg-rgb: 58 42 16;
  --color-status-danger-fg: var(--color-red-300);
  --color-status-danger-fg-rgb: 242 161 155;
  --color-status-danger-bg: var(--color-red-900);
  --color-status-danger-bg-rgb: 61 23 21;
  --color-status-danger-solid: var(--color-red-300);
  --color-status-danger-solid-rgb: 242 161 155;
  --color-status-danger-on-solid: var(--color-red-900);
  --color-status-danger-on-solid-rgb: 61 23 21;
  --color-status-info-fg: var(--color-blue-300);
  --color-status-info-fg-rgb: 157 190 234;
  --color-status-info-bg: var(--color-blue-900);
  --color-status-info-bg-rgb: 21 38 63;
  --color-phase-menstrual-fg: var(--color-rose-300);
  --color-phase-menstrual-fg-rgb: 240 143 174;
  --color-phase-menstrual-bg: var(--color-rose-900);
  --color-phase-menstrual-bg-rgb: 61 26 38;
  --color-phase-menstrual-mark: var(--color-phase-mark-menstrual-dark);
  --color-phase-menstrual-mark-rgb: 217 39 87;
  --color-phase-follicular-fg: var(--color-teal-300);
  --color-phase-follicular-fg-rgb: 127 208 195;
  --color-phase-follicular-bg: var(--color-teal-900);
  --color-phase-follicular-bg-rgb: 19 54 50;
  --color-phase-follicular-mark: var(--color-phase-mark-follicular-dark);
  --color-phase-follicular-mark-rgb: 28 168 158;
  --color-phase-ovulation-fg: var(--color-gold-300);
  --color-phase-ovulation-fg-rgb: 233 194 122;
  --color-phase-ovulation-bg: var(--color-gold-900);
  --color-phase-ovulation-bg-rgb: 56 40 17;
  --color-phase-ovulation-mark: var(--color-phase-mark-ovulation-dark);
  --color-phase-ovulation-mark-rgb: 198 130 4;
  --color-phase-luteal-fg: var(--color-indigo-300);
  --color-phase-luteal-fg-rgb: 169 169 236;
  --color-phase-luteal-bg: var(--color-indigo-900);
  --color-phase-luteal-bg-rgb: 35 35 74;
  --color-phase-luteal-mark: var(--color-phase-mark-luteal-dark);
  --color-phase-luteal-mark-rgb: 150 128 224;
  --color-chart-series-1: var(--color-series-1-dark);
  --color-chart-series-1-rgb: 57 135 229;
  --color-chart-series-2: var(--color-series-2-dark);
  --color-chart-series-2-rgb: 217 89 38;
  --color-chart-series-3: var(--color-series-3-dark);
  --color-chart-series-3-rgb: 25 158 112;
  --color-chart-series-4: var(--color-series-4-dark);
  --color-chart-series-4-rgb: 201 133 0;
}

@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    color-scheme: dark;
    --color-bg-canvas: var(--color-neutral-950);
    --color-bg-canvas-rgb: 22 19 26;
    --color-bg-surface: var(--color-neutral-900);
    --color-bg-surface-rgb: 34 30 39;
    --color-bg-surface-subtle: var(--color-neutral-850);
    --color-bg-surface-subtle-rgb: 42 37 48;
    --color-bg-surface-accent: var(--color-plum-900);
    --color-bg-surface-accent-rgb: 52 37 66;
    --color-bg-scrim: var(--color-neutral-950);
    --color-bg-scrim-rgb: 22 19 26;
    --color-text-primary: var(--color-neutral-50);
    --color-text-primary-rgb: 250 249 251;
    --color-text-secondary: var(--color-neutral-300);
    --color-text-secondary-rgb: 209 204 215;
    --color-text-tertiary: var(--color-neutral-400);
    --color-text-tertiary-rgb: 169 162 178;
    --color-text-accent: var(--color-plum-300);
    --color-text-accent-rgb: 196 170 216;
    --color-text-on-accent: var(--color-plum-950);
    --color-text-on-accent-rgb: 34 24 44;
    --color-text-disabled: var(--color-neutral-600);
    --color-text-disabled-rgb: 98 91 107;
    --color-border-subtle: var(--color-neutral-800);
    --color-border-subtle-rgb: 51 46 57;
    --color-border-default: var(--color-neutral-700);
    --color-border-default-rgb: 74 68 82;
    --color-border-strong: var(--color-neutral-500);
    --color-border-strong-rgb: 119 111 128;
    --color-border-focus: var(--color-plum-300);
    --color-border-focus-rgb: 196 170 216;
    --color-accent-default: var(--color-plum-300);
    --color-accent-default-rgb: 196 170 216;
    --color-accent-pressed: var(--color-plum-400);
    --color-accent-pressed-rgb: 165 133 192;
    --color-accent-subtle: var(--color-plum-900);
    --color-accent-subtle-rgb: 52 37 66;
    --color-control-track-off: var(--color-neutral-700);
    --color-control-track-off-rgb: 74 68 82;
    --color-control-thumb: var(--color-neutral-50);
    --color-control-thumb-rgb: 250 249 251;
    --color-control-disabled-bg: var(--color-neutral-800);
    --color-control-disabled-bg-rgb: 51 46 57;
    --color-status-success-fg: var(--color-green-300);
    --color-status-success-fg-rgb: 143 209 168;
    --color-status-success-bg: var(--color-green-900);
    --color-status-success-bg-rgb: 23 48 31;
    --color-status-warning-fg: var(--color-amber-300);
    --color-status-warning-fg-rgb: 242 196 107;
    --color-status-warning-bg: var(--color-amber-900);
    --color-status-warning-bg-rgb: 58 42 16;
    --color-status-danger-fg: var(--color-red-300);
    --color-status-danger-fg-rgb: 242 161 155;
    --color-status-danger-bg: var(--color-red-900);
    --color-status-danger-bg-rgb: 61 23 21;
    --color-status-danger-solid: var(--color-red-300);
    --color-status-danger-solid-rgb: 242 161 155;
    --color-status-danger-on-solid: var(--color-red-900);
    --color-status-danger-on-solid-rgb: 61 23 21;
    --color-status-info-fg: var(--color-blue-300);
    --color-status-info-fg-rgb: 157 190 234;
    --color-status-info-bg: var(--color-blue-900);
    --color-status-info-bg-rgb: 21 38 63;
    --color-phase-menstrual-fg: var(--color-rose-300);
    --color-phase-menstrual-fg-rgb: 240 143 174;
    --color-phase-menstrual-bg: var(--color-rose-900);
    --color-phase-menstrual-bg-rgb: 61 26 38;
    --color-phase-menstrual-mark: var(--color-phase-mark-menstrual-dark);
    --color-phase-menstrual-mark-rgb: 217 39 87;
    --color-phase-follicular-fg: var(--color-teal-300);
    --color-phase-follicular-fg-rgb: 127 208 195;
    --color-phase-follicular-bg: var(--color-teal-900);
    --color-phase-follicular-bg-rgb: 19 54 50;
    --color-phase-follicular-mark: var(--color-phase-mark-follicular-dark);
    --color-phase-follicular-mark-rgb: 28 168 158;
    --color-phase-ovulation-fg: var(--color-gold-300);
    --color-phase-ovulation-fg-rgb: 233 194 122;
    --color-phase-ovulation-bg: var(--color-gold-900);
    --color-phase-ovulation-bg-rgb: 56 40 17;
    --color-phase-ovulation-mark: var(--color-phase-mark-ovulation-dark);
    --color-phase-ovulation-mark-rgb: 198 130 4;
    --color-phase-luteal-fg: var(--color-indigo-300);
    --color-phase-luteal-fg-rgb: 169 169 236;
    --color-phase-luteal-bg: var(--color-indigo-900);
    --color-phase-luteal-bg-rgb: 35 35 74;
    --color-phase-luteal-mark: var(--color-phase-mark-luteal-dark);
    --color-phase-luteal-mark-rgb: 150 128 224;
    --color-chart-series-1: var(--color-series-1-dark);
    --color-chart-series-1-rgb: 57 135 229;
    --color-chart-series-2: var(--color-series-2-dark);
    --color-chart-series-2-rgb: 217 89 38;
    --color-chart-series-3: var(--color-series-3-dark);
    --color-chart-series-3-rgb: 25 158 112;
    --color-chart-series-4: var(--color-series-4-dark);
    --color-chart-series-4-rgb: 201 133 0;
  }
}

.type-display { font: var(--type-display); letter-spacing: -0.01em; }
.type-title-lg { font: var(--type-title-lg); letter-spacing: -0.005em; }
.type-title-md { font: var(--type-title-md); letter-spacing: 0em; }
.type-title-sm { font: var(--type-title-sm); letter-spacing: 0em; }
.type-question { font: var(--type-question); letter-spacing: 0em; }
.type-body-lg { font: var(--type-body-lg); letter-spacing: 0em; }
.type-body-md { font: var(--type-body-md); letter-spacing: 0em; }
.type-body-sm { font: var(--type-body-sm); letter-spacing: 0em; }
.type-label-lg { font: var(--type-label-lg); letter-spacing: 0em; }
.type-label-md { font: var(--type-label-md); letter-spacing: 0em; }
.type-label-sm { font: var(--type-label-sm); letter-spacing: 0.01em; }
.type-caption { font: var(--type-caption); letter-spacing: 0em; }