/* GENERATED by 08-design-system/tokens/build-tokens.mjs — do not hand-edit.
 * Brand: applyowl · preset: soft · seed #8B7BF7 + #5EE6C4 · neutral: tinted
 * Re-generate: node 08-design-system/tokens/build-tokens.mjs brands/applyowl.json */

:root {
  --font: "Inter", -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(12 11 25);
  --accent-2: rgb(18 17 31);
  --accent-3: rgb(26 19 63);
  --accent-4: rgb(34 23 79);
  --accent-5: rgb(42 28 97);
  --accent-6: rgb(52 36 114);
  --accent-7: rgb(65 48 138);
  --accent-8: rgb(85 65 173);
  --accent-9: rgb(139 123 247);
  --accent-10: rgb(154 142 253);
  --accent-11: rgb(177 172 254);
  --accent-12: rgb(231 231 253);
  --gray-1: rgb(13 12 15);
  --gray-2: rgb(18 18 22);
  --gray-3: rgb(27 27 33);
  --gray-4: rgb(35 35 43);
  --gray-5: rgb(43 43 53);
  --gray-6: rgb(52 52 64);
  --gray-7: rgb(66 66 79);
  --gray-8: rgb(86 86 102);
  --gray-9: rgb(115 114 133);
  --gray-10: rgb(132 132 151);
  --gray-11: rgb(182 182 196);
  --gray-12: rgb(233 233 239);

  --bg: rgb(13 12 15);
  --surface: rgb(22 21 25);
  --surface-2: rgb(19 18 21);
  --surface-3: rgb(29 28 31);
  --line: rgb(255 255 255 / 0.07);
  --line-strong: rgb(255 255 255 / 0.16);
  --text: rgb(233 233 239);
  --text-dim: rgb(182 182 196);
  --solid: rgb(139 123 247);
  --solid-2: rgb(154 142 253);
  --accent-text: rgb(177 172 254);
  --accent-wash: rgb(139 123 247 / 0.16);
  --accent-line: rgb(139 123 247 / 0.34);
  --brand2: #5EE6C4;
  --grad: linear-gradient(135deg, rgb(139 123 247), #5EE6C4);
  --grad-btn: linear-gradient(135deg, rgb(139 123 247), rgb(117 95 227));
  --ok: #5EE6C4;
  --warn: #F2A65A;
  --danger: #F26D6D;
  --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(139 123 247 / 0.16), inset 0 1px 0 rgb(255 255 255 / 0.07);
  --shadow-btn: 0 5px 30px -4px rgb(139 123 247 / 0.6), inset 0 1px 0 rgb(255 255 255 / 0.3);
  --shadow-btn-hover: 0 8px 40px -4px rgb(139 123 247 / 0.75), inset 0 1px 0 rgb(255 255 255 / 0.35);
  --overlay: rgb(5 7 11 / 0.72);
  --glow-a: rgb(139 123 247 / 0.26);
  --glow-b: rgb(94 230 196 / 0.16);
  --pill-tint: 12%;  /* badge fill = its own color mixed in at this strength */
}

[data-theme="light"] {
  --accent-1: rgb(252 252 254);
  --accent-2: rgb(247 247 253);
  --accent-3: rgb(239 238 254);
  --accent-4: rgb(229 228 254);
  --accent-5: rgb(218 217 253);
  --accent-6: rgb(205 204 254);
  --accent-7: rgb(186 182 254);
  --accent-8: rgb(158 148 255);
  --accent-9: rgb(139 123 247);
  --accent-10: rgb(126 109 231);
  --accent-11: rgb(101 80 200);
  --accent-12: rgb(45 25 108);
  --gray-1: rgb(252 252 253);
  --gray-2: rgb(247 247 250);
  --gray-3: rgb(239 239 245);
  --gray-4: rgb(230 230 238);
  --gray-5: rgb(220 220 230);
  --gray-6: rgb(208 208 220);
  --gray-7: rgb(190 190 204);
  --gray-8: rgb(163 163 180);
  --gray-9: rgb(126 126 145);
  --gray-10: rgb(112 111 130);
  --gray-11: rgb(104 103 116);
  --gray-12: rgb(45 44 56);

  --bg: rgb(247 247 250);
  --surface: #ffffff;
  --surface-2: rgb(247 247 250);
  --surface-3: rgb(239 239 245);
  --line: rgb(227 227 234);
  --line-strong: rgb(208 208 220);
  --text: rgb(45 44 56);
  --text-dim: rgb(104 103 116);
  --solid: rgb(139 123 247);
  --solid-2: rgb(126 109 231);
  --accent-text: rgb(101 80 200);
  --accent-wash: rgb(139 123 247 / 0.11);
  --accent-line: rgb(139 123 247 / 0.26);
  --brand2: #5EE6C4;
  --grad: linear-gradient(135deg, rgb(139 123 247), #5EE6C4);
  --grad-btn: linear-gradient(135deg, rgb(139 123 247), rgb(117 95 227));
  --ok: rgb(10 157 129);
  --warn: rgb(195 122 42);
  --danger: rgb(207 77 80);
  --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(139 123 247 / 0.55), inset 0 1px 0 rgb(255 255 255 / 0.4);
  --shadow-btn-hover: 0 7px 34px -6px rgb(139 123 247 / 0.7), inset 0 1px 0 rgb(255 255 255 / 0.45);
  --overlay: rgb(18 20 30 / 0.45);
  --glow-a: rgb(139 123 247 / 0.14);
  --glow-b: rgb(94 230 196 / 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 }

/* 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) }
.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) }