/* ==========================================================================
   Bota — design tokens
   --------------------------------------------------------------------------
   Colour values mirror the app's foundation so bota.uz → app.bota.uz reads as
   one product. Everything else here (type scale, grid, rhythm, easing) belongs
   to the landing page, which is an editorial surface rather than a workspace
   and needs a much wider typographic range than the app does.
   ========================================================================== */

/* ── Typefaces ───────────────────────────────────────────────────────────
   Self-hosted, latin subset only — the CSP is `font-src 'self'`, and a page
   about shipping fast should not be waiting on a third-party font host.
   Three faces, each with one job:
     Inter            everything structural
     Instrument Serif one word in the hero, one line in the closing CTA
     JetBrains Mono   anything the machine wrote — code, paths, build log
   ------------------------------------------------------------------------ */
@font-face {
  font-family: "Inter var";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/inter-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Instrument Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/instrument-serif.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/assets/fonts/jetbrains-mono.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --font-sans: "Inter var", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Instrument Serif", ui-serif, Georgia, "Times New Roman", serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;

  /* ── Surfaces and ink (light) ──────────────────────────────────────────
     Warm neutrals, not blue-greys. The page should feel like paper under a
     warm light — which is also what lets the miniature websites sit on it as
     objects rather than as windows cut into a screen.
     -------------------------------------------------------------------- */
  --background: #fbfaf9;
  --background-sunken: #f4f2f0;
  --card: #ffffff;

  --foreground: #1c1a17;
  --muted-foreground: #6b665f;

  /* The third tier. Darker than the app's equivalent on purpose: here it sets
     the mono labels, the hero's plan line, the footer bar and the prompt
     placeholder — all small text that has to clear 4.5:1, which the app's
     lighter value misses (it reaches only ~3.1:1 on this paper). Measured at
     4.98:1 on --background and 4.65:1 on --background-sunken. */
  --faint: #726c64;

  --muted: #f4f2f0;
  --accent: #f0edea;

  /* Hairlines. `--rule` is the one that draws the page's editorial structure;
     `--border` is for objects that need to read as physical panels. */
  --rule: #e6e2dc;
  --rule-strong: #d6d0c8;
  --border: #eae7e2;
  --border-strong: #dad5ce;

  /* ── Brand ────────────────────────────────────────────────────────────
     Bota Orange, inherited from the app. Still rationed: interactive things
     and exactly one editorial mark per screen. Colour used everywhere is the
     fastest way to make a page look generated — an orange page is not more
     on-brand than an orange button, it is just louder.

     Two values, and the distinction matters. `--brand-ignite` (#ff7a18) is the
     logo's orange: the one in the mark, in the ember washes, in the glow under
     the prompt. `--brand` is that hue stepped down until it clears AA as text
     on paper (5.11:1) and under white (5.32:1), because `--brand` is read —
     links, the caret, the active nav dot, the layer labels. On this paper
     #ff7a18 is 2.5:1 and would be unreadable at 13px.
     -------------------------------------------------------------------- */
  --brand: #b8470a;
  --brand-hover: #a03d06;
  --brand-foreground: #ffffff;
  --brand-subtle: #fff0e2;
  --brand-line: #f2cdaa;
  --ring: #b8470a;

  --brand-ignite: #ff7a18;
  --brand-amber: #ffb347;

  /* Status. Used in exactly one place — the compiler transcript — and chosen
     to clear 4.5:1 on this paper rather than to be the loudest red and green
     available. */
  --bad: #a3301f;
  --ok: #2c6e49;

  /* ── Warm depth ───────────────────────────────────────────────────────
     The page is lit, not printed. `--surface-warm` is the alternating band
     that gives sections their own ground; `--ember` is the brand at a few
     percent, used as a wash behind the two moments the page asks you to type;
     `--vignette` closes the edges so a full-bleed section has a horizon.
     All three are deliberately below the threshold where you would call them
     "a colour" — you should notice the depth, not the tint.
     -------------------------------------------------------------------- */
  --surface-warm: #f8f3ee;
  --ember: rgba(255, 122, 24, 0.055);
  --ember-strong: rgba(255, 122, 24, 0.115);
  --vignette: rgba(60, 34, 14, 0.05);

  /* Wireframe greys for the build sequence — these have to sit *between*
     paper and rule, or the skeleton reads as content instead of scaffolding. */
  --wire: #ded9d2;
  --wire-fill: #eeeae5;

  /* The anatomy plates. On light paper a white card separates from the ground
     on its own; on dark it does not, so this is a token rather than reusing
     `--card` and living with five invisible planes. */
  --plate: #ffffff;

  /* ── Elevation ────────────────────────────────────────────────────────
     Warm-tinted shadows. Neutral-black shadows on warm paper look like dirt.
     -------------------------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(28, 26, 23, 0.06);
  --shadow-md: 0 2px 8px -2px rgba(28, 26, 23, 0.1);
  --shadow-lg: 0 12px 32px -8px rgba(28, 26, 23, 0.14);
  --shadow-xl: 0 32px 64px -24px rgba(28, 26, 23, 0.22);
  --shadow-window: 0 1px 1px rgba(28, 26, 23, 0.04),
    0 8px 24px -8px rgba(28, 26, 23, 0.12), 0 40px 80px -32px rgba(28, 26, 23, 0.24);

  color-scheme: light;
}

[data-theme="dark"] {
  /* Four distinct planes rather than one. `--background-sunken` is dropped
     well below the canvas (it used to be a hair under it, which read as a
     rendering artefact rather than as depth) so a full-bleed band actually
     recedes. Nothing here is #000: the darkest plane still carries the same
     warm cast as the paper theme, and pure black next to #ff7a18 is what
     makes orange look like a hazard sign. */
  --background: #191817;
  --background-sunken: #100f0d;
  --card: #211f1d;

  --foreground: #eceae7;
  --muted-foreground: #a6a09a;

  /* Lightened for the same reason as its light-theme counterpart:
     5.32:1 on --background, 4.93:1 on --card. */
  --faint: #928c84;

  --muted: #2a2724;
  --accent: #2a2724;

  --rule: #2e2a26;
  --rule-strong: #3d3833;
  --border: #302c28;
  --border-strong: #3c3833;

  /* Dark can carry the mark's orange nearly neat — 7.5:1 on the canvas — so
     here `--brand` and `--brand-ignite` converge and the whole UI runs the
     real hue. */
  --brand: #ff8a2b;
  --brand-hover: #ffa046;
  --brand-foreground: #1a0e04;
  --brand-subtle: #2a1b10;
  --brand-line: #5c3517;
  --ring: #ff8a2b;

  --brand-ignite: #ff7a18;
  --brand-amber: #ffb347;

  --bad: #f0857a;
  --ok: #6cc08b;

  /* Layers, not a black hole. The canvas stays a warm charcoal and the bands
     sit *above* it rather than below, which is what stops a long dark page
     from reading as one flat sheet. The embers are stronger here because a
     5% wash disappears entirely on a dark ground. */
  --surface-warm: #201c18;
  --ember: rgba(255, 138, 43, 0.075);
  --ember-strong: rgba(255, 138, 43, 0.16);
  --vignette: rgba(0, 0, 0, 0.34);

  --wire: #3a3531;
  --wire-fill: #262320;

  /* Lifted well clear of --background (#191817); at --card's value the plates
     and the page behind them were the same colour. */
  --plate: #2b2825;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 2px 8px -2px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 16px 40px -12px rgba(0, 0, 0, 0.6);
  --shadow-xl: 0 40px 80px -32px rgba(0, 0, 0, 0.75);
  --shadow-window: 0 1px 1px rgba(0, 0, 0, 0.5),
    0 8px 24px -8px rgba(0, 0, 0, 0.6), 0 40px 80px -32px rgba(0, 0, 0, 0.8);

  color-scheme: dark;
}

:root {
  /* ── Type scale ───────────────────────────────────────────────────────
     Fluid, but with hand-set endpoints rather than a generated ratio — the
     display sizes are chosen so the hero headline breaks where it should at
     every width, which no modular scale gets right by accident.

     Tracking tightens as size grows, the way metal type was cut. Without it,
     large text looks loose and small text looks cramped — the single most
     common tell of a page nobody typeset.
     -------------------------------------------------------------------- */
  --t-display: clamp(2.875rem, 1.1rem + 7.1vw, 6.75rem);
  --t-h2: clamp(2rem, 1.15rem + 3.4vw, 3.5rem);
  --t-h3: clamp(1.3125rem, 1.15rem + 0.7vw, 1.625rem);
  --t-h4: 1.0625rem;
  --t-lead: clamp(1.0625rem, 1rem + 0.36vw, 1.25rem);
  --t-body: 1rem;
  --t-sm: 0.9375rem;
  --t-xs: 0.8125rem;
  --t-label: 0.6875rem;

  --lh-display: 0.94;
  --lh-h2: 1.04;
  --lh-h3: 1.22;
  --lh-body: 1.62;

  --ls-display: -0.042em;
  --ls-h2: -0.032em;
  --ls-h3: -0.021em;
  --ls-body: -0.011em;
  --ls-label: 0.14em;

  /* ── Rhythm ───────────────────────────────────────────────────────────
     A 4px base. Section padding is fluid so that vertical whitespace scales
     with the type rather than staying fixed while headlines double in size.
     -------------------------------------------------------------------- */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --s8: 64px;
  --s9: 96px;
  --s10: 128px;

  --section-y: clamp(80px, 9vw, 152px);
  --section-y-tight: clamp(56px, 6vw, 96px);

  /* ── Grid ─────────────────────────────────────────────────────────────
     A real 12-column grid the content actually aligns to. The editorial feel
     comes from things starting on column 1 and stopping at column 7 or 8 —
     never from centring everything and hoping.
     -------------------------------------------------------------------- */
  --shell: 1200px;
  --shell-narrow: 760px;
  --gutter: clamp(20px, 4.2vw, 48px);
  --columns: 12;
  --col-gap: clamp(16px, 1.8vw, 28px);

  --nav-h: 60px;

  /* ── Radii ────────────────────────────────────────────────────────────
     Restrained. Big pill radii on everything is a template signature; real
     product surfaces use small, consistent corners.
     -------------------------------------------------------------------- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 9px;
  --radius-lg: 13px;
  --radius-xl: 18px;

  /* ── Easing ───────────────────────────────────────────────────────────
     Hand-tuned. `--ease-out` decelerates hard and settles — motion that
     arrives rather than motion that stops. `--ease-inout` is for anything
     that runs in both directions — the canvas meter, the one slow pan.
     -------------------------------------------------------------------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-crisp: cubic-bezier(0.4, 0, 0.2, 1);

  --dur-fast: 140ms;
  --dur-base: 260ms;
  --dur-slow: 520ms;
  --dur-scene: 900ms;
}