/* GENERATED FILE. Do not edit it: it is a copy of the app's design system.
   Source: ffdraft_gui/static/style.css (the tokens, the button families,
   the focus ring and the touch sizes), by tools/gen_site_design.py.
   After any change to those in the app, run
       python -m tools.gen_site_design
   tests/test_site_contract.py fails until you have (UI_GUIDELINES.md, D37).
   The site's own layout lives in style.css, which loads after this file. */

/* ---- tokens: the app's root block ---- */
:root {
  --bg-0: oklch(0.14 0.022 300);
  --bg-1: oklch(0.18 0.028 298);
  --bg-2: oklch(0.22 0.032 296);
  --bg-3: oklch(0.27 0.036 295);
  --fg-1: oklch(0.97 0.008 300);
  --fg-2: oklch(0.80 0.025 298);
  --fg-3: oklch(0.68 0.035 296);
  --fg-4: oklch(0.58 0.035 296);
  --blue:    oklch(0.66 0.24 262);
  --violet:  oklch(0.66 0.24 295);
  --red:     oklch(0.62 0.24 20);
  --hot:     oklch(0.70 0.23 35);
  --blue-bright:   oklch(0.79 0.16 262);
  --violet-bright: oklch(0.79 0.16 295);
  --red-bright:    oklch(0.76 0.17 20);
  --blue-deep:   oklch(0.38 0.15 262);
  --violet-deep: oklch(0.40 0.17 295);
  --red-deep:    oklch(0.34 0.15 20);
  --accent: var(--violet);
  --accent-hover: oklch(0.72 0.24 295);
  --accent-press: oklch(0.60 0.24 295);
  --text-on-accent: oklch(0.985 0.01 300);
  --link: var(--violet-bright);
  --link-hover: oklch(0.87 0.10 295);
  --success: oklch(0.66 0.15 165);
  --warning: oklch(0.75 0.14 80);
  --danger:  oklch(0.62 0.19 15);
  --border-1: color-mix(in oklab, white 11%, transparent);
  --border-2: color-mix(in oklab, white 18%, transparent);
  --border-accent: color-mix(in oklab, var(--violet) 45%, transparent);
  --glass-1: color-mix(in oklab, oklch(0.85 0.05 295) 9%, transparent);
  --glass-2: color-mix(in oklab, oklch(0.85 0.05 295) 14%, transparent);
  --grad-aurora: linear-gradient(118deg, var(--blue-deep) 0%, var(--violet) 34%, var(--red) 78%, var(--hot) 106%);
  --grad-aurora-deep: linear-gradient(160deg, var(--violet-deep), var(--red-deep) 70%, oklch(0.30 0.12 35));
  --aurora-fill:
    linear-gradient(color-mix(in oklab, var(--bg-0) 20%, transparent),
                    color-mix(in oklab, var(--bg-0) 20%, transparent)),
    var(--grad-aurora);
  --grad-text: linear-gradient(100deg, var(--violet-bright), var(--red-bright) 58%, oklch(0.80 0.17 30));
  --grad-panel: linear-gradient(160deg,
    color-mix(in oklab, var(--violet-deep) 30%, var(--bg-0)) 0%,
    var(--bg-0) 55%,
    color-mix(in oklab, var(--red-deep) 22%, var(--bg-0)) 100%);
  --grad-nebula:
    radial-gradient(130% 140% at 10% -10%, oklch(0.42 0.19 295 / .55) 0%, transparent 55%),
    radial-gradient(110% 120% at 90% 10%, oklch(0.42 0.19 20 / .42) 0%, transparent 55%),
    radial-gradient(150% 160% at 50% 118%, oklch(0.36 0.14 262 / .38) 0%, transparent 60%);
  --grad-chrome: conic-gradient(from 210deg at 50% 50%,
    oklch(0.70 0.16 295), oklch(0.78 0.14 20), oklch(0.76 0.15 35),
    oklch(0.91 0.04 320), oklch(0.66 0.18 285), oklch(0.70 0.16 295));
  --grad-steel: conic-gradient(from 40deg,#fdfeff 0%,#c7ccdd 5%,#6a7089 13%,#262a3e 21%,#9ba1b8 29%,#f4f6ff 37%,#ffffff 41%,#8a90a8 49%,#383d53 57%,#d4d9ea 65%,#ffffff 71%,#565c74 81%,#2c3044 87%,#cfd4e6 93%,#fdfeff 100%);
  --grain-rings: repeating-radial-gradient(closest-side,rgba(255,255,255,.06) 0 1.2px,rgba(10,12,24,.07) 1.2px 3px,rgba(255,255,255,.025) 3px 4.5px);
  --shadow-card:  0 10px 30px -10px oklch(0.05 0.03 295 / .50), 0 2px 8px oklch(0.05 0.03 295 / .30);
  --shadow-plane: 0 24px 48px -12px oklch(0.05 0.03 295 / .55), 0 4px 12px oklch(0.05 0.03 295 / .35);
  --shadow-float: 0 48px 96px -24px oklch(0.04 0.04 295 / .65), 0 12px 28px -8px oklch(0.04 0.04 295 / .45);
  --glow-violet: 0 0 52px -4px oklch(0.66 0.24 295 / .70);
  --glow-red:    0 0 52px -4px oklch(0.62 0.24 20 / .65);
  --glow-blue:   0 0 44px -6px oklch(0.66 0.24 262 / .55);
  --inset-glass: inset 0 1px 0 color-mix(in oklab, white 22%, transparent), inset 0 -1px 0 color-mix(in oklab, white 6%, transparent);
  --blur-glass: 28px;
  --ease-drift: cubic-bezier(.22, .8, .24, 1);
  --dur-quick: 160ms;
  --dur-drift: 480ms;
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px;
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 24px; --r-pill: 999px;
  --ctl-h: 34px;
  --ctl-h-sm: 24px;
  --ctl-pad-x: var(--sp-3);
  --ctl-radius: var(--r-md);
  --ctl-border: var(--border-2);
  --ctl-font:       600 13px/1 var(--font-sans);
  --ctl-font-sm:    600 11px/1 var(--font-sans);
  --ctl-font-field: 400 13px/1 var(--font-sans);
  --ctl-font-num:   500 13px/1 var(--font-mono);
  --inset-well: inset 0 1px 2px color-mix(in oklab, var(--bg-0) 70%, transparent),
                inset 0 -1px 0 color-mix(in oklab, white 6%, transparent);
  --font-display: "Kanit", "Helvetica Neue", Helvetica, sans-serif;
  --font-sans: "Geist", "Helvetica Neue", Helvetica, sans-serif;
  --font-mono: "Geist Mono", "SF Mono", ui-monospace, monospace;
  --text-hero:  italic 900 64px/1.04 var(--font-display);
  --text-h1:    italic 900 40px/1.1 var(--font-display);
  --text-h2:    italic 800 26px/1.2 var(--font-display);
  --text-h3:    600 17px/1.35 var(--font-sans);
  --text-body:  400 15px/1.55 var(--font-sans);
  --text-small: 400 13px/1.5 var(--font-sans);
  --text-label: 500 11px/1.2 var(--font-sans);
  --text-data:  500 15px/1.3 var(--font-mono);
  --text-data-lg: 500 28px/1.1 var(--font-mono);
  --tracking-label: 0.14em;
  --tracking-display: 0.01em;
  --display-slant: -8deg;
  --display-stretch: 1.5;
}

/* ---- the button families: neutral, primary, subtle, danger, disabled ---- */
button, a.primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: var(--ctl-h);
  padding: 0 var(--ctl-pad-x);
  background: var(--grad-panel);
  color: var(--fg-1);
  border: 1px solid var(--ctl-border);
  border-radius: var(--ctl-radius);
  cursor: pointer;
  font: var(--ctl-font);
  white-space: nowrap;
  text-decoration: none;
  box-shadow: var(--inset-glass);
  transition: background var(--dur-quick) var(--ease-drift),
              border-color var(--dur-quick) var(--ease-drift),
              box-shadow var(--dur-quick) var(--ease-drift),
              color var(--dur-quick) var(--ease-drift);
}
@media (hover: hover) {
  button:hover { background: var(--glass-2);
                 box-shadow: var(--shadow-card), var(--inset-glass); }
}
button:active { box-shadow: var(--inset-glass); }
button.primary, a.primary {
  background: var(--aurora-fill);
  background-clip: padding-box;
  border-color: transparent;
  color: var(--text-on-accent);
  box-shadow: var(--shadow-card);
}
@media (hover: hover) {
  button.primary:hover, a.primary:hover {
    background: var(--aurora-fill);
    background-clip: padding-box;
    box-shadow: var(--glow-violet), var(--shadow-card);
  }
}
button.primary:active, a.primary:active { box-shadow: var(--shadow-card); }
button.subtle {
  background: none;
  border-color: transparent;
  box-shadow: none;
  color: var(--fg-3);
}
@media (hover: hover) {
  button.subtle:hover { background: var(--glass-1); color: var(--fg-1);
                        box-shadow: none; }
}
button.danger {
  background: color-mix(in oklab, var(--danger) 14%, transparent);
  border-color: color-mix(in oklab, var(--danger) 55%, transparent);
  color: color-mix(in oklab, var(--danger) 30%, white);
}
@media (hover: hover) {
  button.danger:hover {
    background: color-mix(in oklab, var(--danger) 24%, transparent);
    box-shadow: var(--glow-red), var(--inset-glass);
  }
}
button:disabled, button:disabled:hover,
input:disabled, select:disabled, input:disabled:hover {
  background: var(--glass-1);
  background-clip: padding-box;
  border-color: var(--border-1);
  color: var(--fg-4);
  box-shadow: none;
  cursor: not-allowed;
}
.btn-sm {
  min-height: var(--ctl-h-sm);
  min-width: var(--ctl-h-sm);
  padding: 0 var(--sp-2);
  font: var(--ctl-font-sm);
  white-space: nowrap;
}
.btn-icon {
  width: var(--ctl-h);
  min-width: var(--ctl-h);
  height: var(--ctl-h);
  padding: 0;
}
.btn-icon.btn-sm {
  width: var(--ctl-h-sm);
  min-width: var(--ctl-h-sm);
  height: var(--ctl-h-sm);
}

/* ---- links as buttons: a.neutral and a.subtle, from those rules ---- */
a.neutral, a.subtle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: var(--ctl-h);
  padding: 0 var(--ctl-pad-x);
  background: var(--grad-panel);
  color: var(--fg-1);
  border: 1px solid var(--ctl-border);
  border-radius: var(--ctl-radius);
  cursor: pointer;
  font: var(--ctl-font);
  white-space: nowrap;
  text-decoration: none;
  box-shadow: var(--inset-glass);
  transition: background var(--dur-quick) var(--ease-drift),
  border-color var(--dur-quick) var(--ease-drift),
  box-shadow var(--dur-quick) var(--ease-drift),
  color var(--dur-quick) var(--ease-drift);
}
a.subtle {
  background: none;
  border-color: transparent;
  box-shadow: none;
  color: var(--fg-3);
}
@media (hover: hover) {
  a.neutral:hover, a.subtle:hover {
    background: var(--glass-2);
    box-shadow: var(--shadow-card), var(--inset-glass);
  }
  a.subtle:hover {
    background: var(--glass-1); color: var(--fg-1);
    box-shadow: none;
  }
}
a.neutral:active, a.subtle:active {
  box-shadow: var(--inset-glass);
}

/* ---- the one focus ring ---- */
input:focus-visible,
select:focus-visible,
button:focus-visible,
a:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--violet-bright);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
h1[tabindex="-1"]:focus, h1[tabindex="-1"]:focus-visible { outline: none; }
main[tabindex="-1"]:focus, main[tabindex="-1"]:focus-visible { outline: none; }
input[type="search"]:focus, select:focus,
input[type="text"]:focus, input[type="password"]:focus,
input[type="number"]:focus {
  border-color: var(--border-accent);
  box-shadow: var(--glow-violet);
}

/* ---- touch sizes ---- */
@media (pointer: coarse) {
  :root { --ctl-h: 44px; --ctl-h-sm: 34px; }
  input, select, textarea { font-size: 16px !important; }
}