/* Generated from design_tokens.py — IOXIQ 1.5. Do not edit. */
:root {
  --ink: #101710;
  --forest: #1c3026;
  --cream: #f6f6e9;
  --lime: #beff67;
  --pink: #f5b8d9;
  --lilac: #c2b2f2;
  --cyan: #8cdfd7;
  --peach: #ffc591;
  --muted: #b2bfb0;
  --line: #354334;
  --font-display: "Space Grotesk", "Manrope", sans-serif;
  --font-body: "Manrope", Arial, sans-serif;
  --font-emphasis: Georgia, serif;
  --weight-regular: 400;
  --weight-heading: 500;
  --weight-label: 600;
  --weight-action: 700;
  --type-caption: 0.75rem;
  --type-small: 0.875rem;
  --type-body: 1rem;
  --type-lead: clamp(1.125rem, 1rem + .5vw, 1.375rem);
  --type-title: clamp(1.5rem, 1.25rem + 1vw, 2rem);
  --type-heading: clamp(2rem, 1.5rem + 2vw, 3rem);
  --type-display: clamp(3rem, 1.5rem + 5vw, 6.75rem);
  --leading-caption: 1.5;
  --leading-small: 1.6;
  --leading-body: 1.65;
  --leading-lead: 1.5;
  --leading-title: 1.2;
  --leading-heading: 1.1;
  --leading-display: 1.05;
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-64: 64px;
  --space-96: 96px;
  --space-128: 128px;
  --radius-small: 8px;
  --radius-control: 12px;
  --radius-action: 16px;
  --radius-panel: 20px;
  --radius-large: 24px;
  --radius-circle: 50%;
  --surface-paper: var(--cream);
  --surface-raised: #fcfcf4;
  --surface-soft: #e8eddf;
  --surface-field: #fffdf4;
  --surface-inverse: var(--forest);
  --text-primary: var(--forest);
  --text-secondary: #52644d;
  --text-inverse: var(--cream);
  --border-subtle: #c3cdba;
  --border-strong: #879684;
  --border-inverse: #ffffff40;
  --border-width: 1px;
  --border-control: 1px solid var(--border-strong);
  --border-panel: 1px solid var(--border-subtle);
  --state-info: #493971;
  --state-info-surface: #eee8f7;
  --state-success: #28593b;
  --state-success-surface: #e3efda;
  --state-warning: #775016;
  --state-warning-surface: #fff0cf;
  --state-error: #922f38;
  --state-error-surface: #fbe8e8;
  --state-disabled: #52644d;
  --state-disabled-surface: #dde4d6;
  --focus-light: #7549a9;
  --focus-colour: var(--focus-light);
  --focus-inverse: var(--lime);
  --focus-width: 3px;
  --focus-offset: 4px;
  --focus-ring: var(--focus-width) solid var(--focus-colour);
  --shadow-panel: 0 5px 0 #d8e1cd;
  --shadow-receipt: 0 7px 0 #b1bea0;
  --shadow-dialog: 0 8px 0 #8c9d84, 0 24px 80px #10171033;
  --shadow-action: inset 0 1px 0 #ffffff30, 0 5px 0 var(--action-shadow), 0 8px 14px #10171018;
  --shadow-action-hover: inset 0 1px 0 #ffffff45, 0 7px 0 var(--action-shadow), 0 11px 18px #10171020;
  --shadow-action-pressed: inset 0 2px 3px #10171020, 0 1px 0 var(--action-shadow);
  --shadow-secondary: inset 0 1px 0 #ffffff45, 0 4px 0 color-mix(in srgb,currentColor 22%,transparent);
  --action-highlight: linear-gradient(180deg,#ffffff12,#00000008);
  --action-forest-hover: #294737;
  --action-forest-base: #8c9d84;
  --action-lime-hover: #cfff92;
  --action-lime-base: #749d42;
  --action-height: 56px;
  --action-compact-height: 44px;
  --action-radius: var(--radius-action);
  --action-gap: 10px;
  --action-icon-size: 22px;
  --field-height: 52px;
  --field-padding: 12px 16px;
  --motion-feedback: 180ms;
  --motion-disclosure: 350ms;
  --motion-settle: 650ms;
  --motion-ease: cubic-bezier(.2,.7,.2,1);
  --motion-spring: cubic-bezier(.18,.8,.25,1.2);
  --brand-display: var(--font-display);
  --brand-body: var(--font-body);
  --brand-emphasis: var(--font-emphasis);
  --brand-feedback: var(--motion-feedback);
  --brand-disclosure: var(--motion-disclosure);
  --brand-settle: var(--motion-settle);
  --action-feedback: var(--motion-feedback);
  --accent: var(--lime);
  --radius: 22px;
}
:where(.iox-action) {
  --shadow-action: inset 0 1px 0 #ffffff30, 0 5px 0 var(--action-shadow), 0 8px 14px #10171018;
  --shadow-action-hover: inset 0 1px 0 #ffffff45, 0 7px 0 var(--action-shadow), 0 11px 18px #10171020;
  --shadow-action-pressed: inset 0 2px 3px #10171020, 0 1px 0 var(--action-shadow);
}
:where(:focus-visible, :focus-within, .kit-focus-ring) {
  --focus-ring: var(--focus-width) solid var(--focus-colour);
}