/* GENERATED by 08-design-system/tokens/build-tokens.mjs — do not hand-edit.
 * Brand: santasaidit · preset: soft · seed #E5484D + #3CBF7F · neutral: warm
 * Re-generate: node 08-design-system/tokens/build-tokens.mjs brands/santasaidit.json */

:root {
  --font: "Nunito", -apple-system, system-ui, sans-serif;
  --radius-lg: 24px;
  --radius-md: 16px;
  --radius-sm: 11px;
  --radius-btn: 999px;
  --ease-glide: cubic-bezier(.4, 0, .2, 1);
  --dur-disclose: .24s;
  --dur-disclose-fade: .15s;
  --delay-disclose: .07s;
  --stack-gap: 14px;        /* space between stacked/sibling cards — always via .stack */
  --stack-gap-loose: 18px;  /* between a card group and what follows it */
  --btn-row-gap: 10px;      /* text → the buttons that act on it */
  --field-min: 170px;
  --form-gap: 12px;
  --heading-gap: 8px;
  --hint-size: 13.5px;      /* helper / secondary text under controls and cards */
  --menu-hover: var(--accent-wash);  /* hovered/active option in any dropdown or typeahead */
  --switch-w: 42px;         /* toggle switch track */
  --switch-h: 24px;       /* a card/section heading → the text right under it */         /* ONE rhythm between every row of a form: options, inputs, errors, buttons */       /* narrowest a form column gets before .field-row drops a column */
  --accent-1: rgb(24 7 7);
  --accent-2: rgb(30 13 12);
  --accent-3: rgb(59 2 6);
  --accent-4: rgb(73 1 9);
  --accent-5: rgb(89 0 12);
  --accent-6: rgb(105 2 17);
  --accent-7: rgb(131 1 23);
  --accent-8: rgb(164 15 35);
  --accent-9: rgb(229 72 77);
  --accent-10: rgb(247 89 92);
  --accent-11: rgb(255 149 144);
  --accent-12: rgb(253 226 224);
  --gray-1: rgb(14 13 11);
  --gray-2: rgb(20 18 16);
  --gray-3: rgb(30 27 24);
  --gray-4: rgb(38 35 30);
  --gray-5: rgb(47 43 37);
  --gray-6: rgb(57 53 46);
  --gray-7: rgb(72 67 59);
  --gray-8: rgb(94 87 78);
  --gray-9: rgb(123 115 105);
  --gray-10: rgb(141 133 122);
  --gray-11: rgb(189 182 173);
  --gray-12: rgb(236 233 230);

  --bg: rgb(14 13 11);
  --surface: rgb(23 22 20);
  --surface-2: rgb(20 19 17);
  --surface-3: rgb(30 29 26);
  --line: rgb(255 255 255 / 0.07);
  --line-strong: rgb(255 255 255 / 0.16);
  --text: rgb(236 233 230);
  --text-dim: rgb(189 182 173);
  --solid: rgb(229 72 77);
  --solid-2: rgb(247 89 92);
  --accent-text: rgb(255 149 144);
  --accent-wash: rgb(229 72 77 / 0.16);
  --accent-line: rgb(229 72 77 / 0.34);
  --brand2: #3CBF7F;
  --grad: linear-gradient(135deg, rgb(229 72 77), #3CBF7F);
  --grad-btn: linear-gradient(135deg, rgb(229 72 77), rgb(206 25 48));
  --ok: #3CBF7F;
  --warn: #F2A65A;
  --danger: #D93A3A;
  --shadow-card: 0 26px 56px -14px rgb(0 0 0 / 0.6), inset 0 1px 0 rgb(255 255 255 / 0.05);
  --shadow-card-hover: 0 36px 72px -14px rgb(0 0 0 / 0.7), 0 0 44px rgb(229 72 77 / 0.16), inset 0 1px 0 rgb(255 255 255 / 0.07);
  --shadow-btn: 0 5px 30px -4px rgb(229 72 77 / 0.6), inset 0 1px 0 rgb(255 255 255 / 0.3);
  --shadow-btn-hover: 0 8px 40px -4px rgb(229 72 77 / 0.75), inset 0 1px 0 rgb(255 255 255 / 0.35);
  --overlay: rgb(5 7 11 / 0.72);
  --glow-a: rgb(229 72 77 / 0.26);
  --glow-b: rgb(60 191 127 / 0.16);
  --pill-tint: 12%;  /* badge fill = its own color mixed in at this strength */
}

[data-theme="light"] {
  --accent-1: rgb(255 251 251);
  --accent-2: rgb(253 246 245);
  --accent-3: rgb(254 235 234);
  --accent-4: rgb(255 223 220);
  --accent-5: rgb(254 209 206);
  --accent-6: rgb(255 191 187);
  --accent-7: rgb(255 162 157);
  --accent-8: rgb(255 113 111);
  --accent-9: rgb(229 72 77);
  --accent-10: rgb(213 56 64);
  --accent-11: rgb(191 30 46);
  --accent-12: rgb(92 0 13);
  --gray-1: rgb(253 252 252);
  --gray-2: rgb(249 247 246);
  --gray-3: rgb(242 240 237);
  --gray-4: rgb(234 231 227);
  --gray-5: rgb(224 221 216);
  --gray-6: rgb(213 209 203);
  --gray-7: rgb(196 190 183);
  --gray-8: rgb(171 163 154);
  --gray-9: rgb(135 127 117);
  --gray-10: rgb(120 112 102);
  --gray-11: rgb(111 104 94);
  --gray-12: rgb(50 45 38);

  --bg: rgb(249 247 246);
  --surface: #ffffff;
  --surface-2: rgb(249 247 246);
  --surface-3: rgb(242 240 237);
  --line: rgb(230 227 224);
  --line-strong: rgb(213 209 203);
  --text: rgb(50 45 38);
  --text-dim: rgb(111 104 94);
  --solid: rgb(229 72 77);
  --solid-2: rgb(213 56 64);
  --accent-text: rgb(191 30 46);
  --accent-wash: rgb(229 72 77 / 0.11);
  --accent-line: rgb(229 72 77 / 0.26);
  --brand2: #3CBF7F;
  --grad: linear-gradient(135deg, rgb(229 72 77), #3CBF7F);
  --grad-btn: linear-gradient(135deg, rgb(229 72 77), rgb(206 25 48));
  --ok: rgb(6 118 72);
  --warn: rgb(195 122 42);
  --danger: rgb(181 6 27);
  --shadow-card: 0 18px 44px -14px rgb(128 128 128 / 0.25), 0 2px 7px rgb(128 128 128 / 0.08), inset 0 1px 0 #ffffff;
  --shadow-card-hover: 0 30px 64px -14px rgb(128 128 128 / 0.35), 0 3px 9px rgb(128 128 128 / 0.1), inset 0 1px 0 #ffffff;
  --shadow-btn: 0 5px 26px -6px rgb(229 72 77 / 0.55), inset 0 1px 0 rgb(255 255 255 / 0.4);
  --shadow-btn-hover: 0 7px 34px -6px rgb(229 72 77 / 0.7), inset 0 1px 0 rgb(255 255 255 / 0.45);
  --overlay: rgb(18 20 30 / 0.45);
  --glow-a: rgb(229 72 77 / 0.14);
  --glow-b: rgb(60 191 127 / 0.1);
  --pill-tint: 20%;  /* badge fill = its own color mixed in at this strength */
}

/* Legacy aliases — existing stylesheets re-theme through these. */
:root, [data-theme="light"] {
  --ink: var(--bg);
  --ink-2: var(--surface);
  --ink-3: var(--surface-3);
  --primary: var(--solid);
  --primary-2: var(--solid-2);
  --accent: var(--ok);
}

/* Disclosure glide (reusable) — the tuned dropdown animation. Usage:
 *   <details class="disclose"> … </details>     (or .disclose on a wrapper of many)
 * Inner content that should fade+slide in after the panel grows gets .disclose-reveal.
 * Children must use padding, not margin — margins escape the animated height and
 * snap at the end of the collapse. Browsers without interpolate-size just snap. */
.disclose { interpolate-size: allow-keywords }
.disclose::details-content,
.disclose details::details-content {
  block-size: 0;
  overflow-y: clip;
  transition: block-size var(--dur-disclose) var(--ease-glide),
              content-visibility var(--dur-disclose) allow-discrete;
}
.disclose[open]::details-content,
.disclose details[open]::details-content { block-size: auto }
.disclose-reveal {
  opacity: 0;
  translate: 0 -4px;
  transition: opacity var(--dur-disclose-fade) ease, translate var(--dur-disclose-fade) ease;
}
[open] .disclose-reveal,
.open .disclose-reveal {
  opacity: 1;
  translate: 0 0;
  transition: opacity var(--dur-disclose) ease var(--delay-disclose),
              translate var(--dur-disclose) ease var(--delay-disclose);
}

/* Card stack (reusable) — RULE: cards that sit next to each other are NEVER
 * placed as bare siblings; wrap them in .stack (vertical) or .stack-grid
 * (two-up, collapses to one column when narrow). Cards with no margin of
 * their own otherwise touch edge-to-edge (the ApplyOwl onboarding AI-cards bug,
 * 2026-10-18). The gap lives on the container, so a card is reusable anywhere.
 * Default: cards in a row share one height (pricing/plan cards line up).
 * .stack-grid.solo: each card sizes to its OWN content — for cards that expand in
 * place (a form opening, a "how do I…" disclosure) so the neighbour never stretches. */
.stack { display: flex; flex-direction: column; gap: var(--stack-gap); margin-bottom: var(--stack-gap-loose) }
.stack-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--stack-gap); margin-bottom: var(--stack-gap-loose) }
.stack-grid.solo { align-items: start }
@media (max-width: 720px) { .stack-grid { grid-template-columns: 1fr } }

/* Adaptive layout utilities (2026-10-18, ApplyOwl in-app QA) — every surface is
 * resizable, so these never assume a width. RULES they encode:
 *   - a button's own label never wraps; the BUTTON wraps to the next line instead
 *   - inputs in a row stay level even when one label wraps (align to the bottom)
 *   - a title + action header puts the subtext UNDER the row, never beside it
 *   - a form's rows (options, inputs, errors, buttons) share ONE gap: wrap them in .form-stack */
.split { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px 12px }
.split > .fill { flex: 1 1 220px; min-width: 0 }
.split > :not(.fill) { flex: none }
.page-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 6px }
.page-head > h1, .page-head > h2 { margin-bottom: 0; min-width: 0 }
.page-head > .btn, .btn-row > .btn { flex: none; white-space: nowrap; justify-content: center }
.btn-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--btn-row-gap) }
.btn-row > .btn { max-width: 100% }
/* Call-to-action banner: message + one button. Side by side when there's room;
 * the button drops under the message (label intact) when the window is narrow. */
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px }
.cta > .cta-text { flex: 1 1 240px; min-width: 0 }
.cta > .btn { flex: none; white-space: nowrap; max-width: 100%; justify-content: center }
.btn-row > .grow { flex: 1 1 auto }
.form-stack { display: flex; flex-direction: column; gap: var(--form-gap) }
.form-stack > * { margin-top: 0; margin-bottom: 0 }
.form-stack > .btn-row { margin-top: 0 }
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--field-min), 1fr)); gap: 0 14px; align-items: end }

/* Toggle switch (a two-state choice, e.g. Manual / Auto). Markup:
 *   <label class="switch"><input type="checkbox"><span class="off">Off label</span><span class="track"></span><span class="on">On label</span></label>
 * (input FIRST — the styles reach the labels and track with ~)
 * The input is visually hidden but stays focusable; the track turns brand-gradient when on. */
.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; position: relative }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0 }
.switch .track { width: var(--switch-w); height: var(--switch-h); flex: none; border-radius: 999px; position: relative;
  background: var(--surface-3); border: 1px solid var(--line); transition: background .2s ease, border-color .2s ease }
.switch .track::after { content: ""; position: absolute; top: 3px; left: 3px; width: calc(var(--switch-h) - 8px); height: calc(var(--switch-h) - 8px);
  border-radius: 50%; background: var(--text-dim); transition: transform .2s ease, background .2s ease }
.switch input:checked ~ .track { background: var(--grad-btn); border-color: transparent }
.switch input:checked ~ .track::after { transform: translateX(calc(var(--switch-w) - var(--switch-h))); background: #fff }
.switch input:focus-visible ~ .track { box-shadow: 0 0 0 3px var(--accent-wash) }
.switch input:disabled ~ .track { opacity: .5; cursor: not-allowed }
.switch .on, .switch .off { font-size: 14px; color: var(--text-dim); transition: color .2s ease }
.switch input:not(:checked) ~ .off, .switch input:checked ~ .on { color: var(--text); font-weight: 650 }

/* Date picker (KB-008, 2026-10-20) — our own calendar popup, never the OS
 * one, so it matches the brand in light and dark. Hover = --menu-hover, the same
 * wash every dropdown uses; the chosen day = --grad-btn. Markup (ApplyOwl
 * src/components/DatePicker.tsx): .datepick > button.input.datepick-field
 * + .datepick-pop(.end) > .datepick-head, .datepick-grid, .datepick-presets.
 * .end right-aligns the popup when the field sits near the window's edge. */
.datepick { position: relative }
.datepick-field { display: flex; align-items: center; gap: 8px; text-align: left; cursor: pointer; font: inherit; font-size: 14.5px }
.datepick-field > svg { color: var(--solid); flex: none }
.datepick-value { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.datepick-rel { flex: none; font-size: 12.5px; color: var(--text-dim); white-space: nowrap }
.datepick-pop { position: absolute; z-index: 50; top: calc(100% + 6px); left: 0; width: 288px; max-width: calc(100vw - 24px);
  padding: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card-hover); animation: datepick-in var(--dur-disclose-fade) var(--ease-glide) }
.datepick-pop.end { left: auto; right: 0 }
@keyframes datepick-in { from { opacity: 0; translate: 0 -4px } }
.datepick-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 6px }
.datepick-month { font-weight: 650; font-size: 14px; color: var(--text) }
.datepick-nav { display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 8px;
  background: none; color: var(--text-dim); cursor: pointer }
.datepick-nav:hover:not(:disabled) { background: var(--menu-hover); color: var(--accent-text) }
.datepick-nav:disabled { opacity: .3; cursor: default }
.datepick-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px }
.datepick-dow { text-align: center; font-size: 11.5px; font-weight: 600; color: var(--text-dim); padding: 4px 0 }
.datepick-day { aspect-ratio: 1; border: 0; border-radius: 8px; background: none; color: var(--text);
  font: inherit; font-size: 13.5px; cursor: pointer; transition: background .12s ease, color .12s ease }
.datepick-day:hover:not(:disabled), .datepick-day:focus-visible { background: var(--menu-hover); color: var(--accent-text); outline: none }
.datepick-day.is-today { box-shadow: inset 0 0 0 1px var(--accent-line); font-weight: 650 }
.datepick-day.is-sel, .datepick-day.is-sel:hover { background: var(--grad-btn); color: #fff; font-weight: 650 }
.datepick-day:disabled { opacity: .3; cursor: default }
.datepick-presets { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line) }
.datepick-presets button { flex: 1 1 auto; border: 1px solid var(--line); border-radius: 999px; background: none;
  color: var(--text); font: inherit; font-size: 12.5px; padding: 6px 10px; cursor: pointer; white-space: nowrap }
.datepick-presets button:hover { background: var(--menu-hover); color: var(--accent-text); border-color: var(--accent-line) }
.datepick-presets button.is-sel { border-color: var(--solid); color: var(--accent-text) }

/* Helper text — one muted size and color everywhere, inside or outside a card. */
.hint { color: var(--text-dim); font-size: var(--hint-size) }

/* Icon + text on one line (headings, AI lines, notes). The icon takes the brand
 * color. Icons are inline Lucide SVGs — never emoji. */
.icon-line { display: inline-flex; align-items: center; gap: 6px }
h1.icon-line, h2.icon-line, h3.icon-line { display: flex; gap: 8px }
.icon-line > svg { color: var(--solid); flex: none }

/* Form controls in brand color (one look on every surface) */
input::placeholder, textarea::placeholder { color: var(--text-dim); opacity: .6 }
input[type="checkbox"], input[type="radio"] { accent-color: var(--solid) }

/* Browser autofill never repaints a field. Chrome/Safari force a white or
 * yellow background and dark text on autofilled inputs, which breaks dark
 * fields. An inset shadow paints over it in the field's own color, and the
 * text keeps ours. Fields default to --surface-3; a field on another surface
 * sets --field-bg on itself or a parent. !important because page focus
 * styles set box-shadow too and load later; the focus ring is kept here.
 * The two pseudo-classes stay in separate rules: a browser that doesn't know
 * one drops the whole rule. */
input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
  -webkit-text-fill-color: var(--text) !important; caret-color: var(--text);
  -webkit-box-shadow: 0 0 0 1000px var(--field-bg, var(--surface-3)) inset !important;
  box-shadow: 0 0 0 1000px var(--field-bg, var(--surface-3)) inset !important;
  transition: background-color 9999999s ease-out }
input:-webkit-autofill:focus, textarea:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--field-bg, var(--surface-3)) inset, 0 0 0 3px var(--accent-wash) !important;
  box-shadow: 0 0 0 1000px var(--field-bg, var(--surface-3)) inset, 0 0 0 3px var(--accent-wash) !important }
input:autofill, textarea:autofill, select:autofill {
  -webkit-text-fill-color: var(--text) !important; caret-color: var(--text);
  box-shadow: 0 0 0 1000px var(--field-bg, var(--surface-3)) inset !important }
input:autofill:focus, textarea:autofill:focus {
  box-shadow: 0 0 0 1000px var(--field-bg, var(--surface-3)) inset, 0 0 0 3px var(--accent-wash) !important }
.range { -webkit-appearance: none; appearance: none; height: 6px; border-radius: 999px; outline: none;
  background: var(--grad-btn) 0 / var(--fill, 50%) 100% no-repeat, var(--surface-3) }
.range::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; cursor: pointer;
  background: var(--solid); border: 3px solid var(--surface); box-shadow: 0 0 0 1px var(--accent-line), 0 2px 8px rgb(0 0 0 / .3) }
.range::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--solid); border: 3px solid var(--surface) }
.range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--accent-wash) }