/* The tokens, and the little that is true of every element.
 *
 * The components are in ui.css, one per thing the design draws. This file is
 * what they are made of: the two palettes, the keyframes, and a reset that
 * leaves every element plain so that a component says what it looks like.
 *
 * Liquid Glass over Material 3: translucent layers with blur and a light top
 * edge, tonal surfaces, pills, radii 24 / 16 / 999. Manrope for the interface,
 * JetBrains Mono for anything a person copies — addresses, identifiers, numbers.
 * Accent indigo near hue 262, second teal 175. Warning is warm amber and never
 * red: a spent quota and an expired subscription are not accidents.
 */

@import url("/fonts.css");

[data-nz-theme="light"] {
  --bg: oklch(96.5% 0.008 250);
  --blob1: oklch(80% 0.09 262 / .55);
  --blob2: oklch(84% 0.07 175 / .5);
  --glass: rgba(255, 255, 255, .6);
  --glass2: rgba(255, 255, 255, .85);
  --line: rgba(20, 30, 60, .09);
  --line2: rgba(255, 255, 255, .75);
  --fg: oklch(22% 0.02 260);
  --fg2: oklch(45% 0.02 260);
  --fg3: oklch(60% 0.015 260);
  --accent: oklch(50% 0.18 262);
  --accent-fg: #fff;
  --accent-soft: oklch(50% 0.18 262 / .12);
  --teal: oklch(50% 0.11 175);
  --teal-soft: oklch(50% 0.11 175 / .14);
  --warn: oklch(58% 0.14 70);
  --warn-soft: oklch(58% 0.14 70 / .16);
  --ok: oklch(52% 0.14 150);
  --ok-soft: oklch(52% 0.14 150 / .14);
  --bad: oklch(52% 0.19 25);
  --bad-soft: oklch(52% 0.19 25 / .12);
  --shadow: 0 14px 40px -16px rgba(20, 30, 60, .22), inset 0 1px 0 rgba(255, 255, 255, .9);
  --code: oklch(93% 0.01 250);
  --knob: #fff;
  --skel: rgba(20, 30, 60, .07);
}

[data-nz-theme="dark"] {
  --bg: oklch(14% 0.015 262);
  --blob1: oklch(45% 0.13 262 / .45);
  --blob2: oklch(45% 0.1 175 / .35);
  --glass: rgba(255, 255, 255, .055);
  --glass2: rgba(255, 255, 255, .1);
  --line: rgba(255, 255, 255, .09);
  --line2: rgba(255, 255, 255, .13);
  --fg: oklch(95% 0.01 260);
  --fg2: oklch(72% 0.015 260);
  --fg3: oklch(55% 0.015 260);
  --accent: oklch(76% 0.13 262);
  --accent-fg: oklch(16% 0.05 262);
  --accent-soft: oklch(76% 0.13 262 / .16);
  --teal: oklch(76% 0.11 175);
  --teal-soft: oklch(76% 0.11 175 / .16);
  --warn: oklch(78% 0.14 75);
  --warn-soft: oklch(78% 0.14 75 / .16);
  --ok: oklch(75% 0.14 150);
  --ok-soft: oklch(75% 0.14 150 / .16);
  --bad: oklch(70% 0.17 25);
  --bad-soft: oklch(70% 0.17 25 / .16);
  --shadow: 0 16px 48px -16px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .08);
  --code: rgba(0, 0, 0, .35);
  --knob: oklch(95% 0.01 260);
  --skel: rgba(255, 255, 255, .07);
}

@keyframes nzIn { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes nzPop { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes nzShimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } }
@keyframes nzSpin { to { transform: rotate(360deg); } }
@keyframes nzBlob { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(4%, 6%) scale(1.08); } }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

* { box-sizing: border-box; }

/* The browser hides [hidden] with display:none from its own stylesheet, which
   any author display rule outranks. Most things here are flex or grid. */
[hidden] { display: none !important; }

html, body { margin: 0; padding: 0; min-height: 100%; }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: Manrope, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Nothing is styled by being a particular tag. A heading inside a pane and a
   heading inside a card are different sizes, and the only way for both to be
   right is for neither to inherit a guess made here. */
h1, h2, h3, h4 { margin: 0; font: inherit; }
p, ul, ol, dl, dd, figure, pre { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; }
code, pre, kbd, samp { font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; }
strong, b { font-weight: 700; }