/**
 * Design tokens.
 *
 * Every value below was read off Claude Code and Lovable with getComputedStyle,
 * not eyeballed from a screenshot. Where a number looks oddly specific, that is
 * why — `rgb(32, 32, 31)` is Claude Code's actual ground, and the first pass of
 * this file guessed `#17181a`, which is cool where theirs is warm. Side by side
 * that difference is most of what "not polished" meant.
 *
 * Nothing downstream may invent a value. That rule is what makes restyling the
 * product an edit to this file, and what stops the tenth control disagreeing
 * with the first.
 */

:root {
  color-scheme: light dark;

  /* ---------------------------------------------------------------- colour */

  /*
   * Warm neutrals throughout. Claude Code's ramp runs 32,32,31 -> 137,135,129
   * -> 151,149,141 -> 165,164,154 -> 195,194,183 -> 225,224,217 -> 249,249,247,
   * and every step has R >= G >= B. A cool grey next to it reads as cheap.
   */
  --c-ground: #faf9f7;
  --c-surface: #ffffff;

  /*
   * Surfaces are a translucent overlay, not a solid colour.
   *
   * This is the single best idea taken from Claude Code: rgba(255,255,255,0.08)
   * is the most-used background on the page, 103 elements. An overlay sits on
   * whatever is beneath it, so a chip on a panel on the ground stays coherent
   * without three hand-picked greys that drift apart the moment one changes.
   */
  --c-sunk: rgb(0 0 0 / 0.04);
  --c-raise: rgb(0 0 0 / 0.06);
  --c-line: rgb(0 0 0 / 0.11);
  --c-line-strong: rgb(0 0 0 / 0.2);

  --c-ink: #20201f;
  --c-ink-soft: #46453f;
  --c-ink-faint: #6b6a62;
  --c-ink-fainter: #8b897f;

  --c-accent: #2f6f4f;
  --c-accent-ink: #ffffff;
  --c-accent-soft: rgb(47 111 79 / 0.12);

  /* Semantic, and deliberately not the accent — state must read without
     competing with the brand colour. */
  --c-good: #2f6f4f;
  --c-warn: #8a5a12;
  --c-warn-soft: rgb(138 90 18 / 0.12);
  --c-bad: #a33327;
  --c-bad-soft: rgb(163 51 39 / 0.1);

  --c-focus: #2f6f4f;

  /* ------------------------------------------------------------------ type */

  --f-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  /*
   * Measured: 14px on 538 elements, 13px on 311, 16px on 40, 12px on 39. The
   * interface is a 14/13 interface. The earlier 16px body was a full step too
   * large and is most of why the panes felt loose.
   */
  --t-label: 11px;
  --t-xs: 12px;
  --t-sm: 13px;
  --t-md: 14px;
  --t-lg: 16px;
  --t-xl: 20px;

  /* Two weights. Measured: 400 on 734 elements, 500 on 154, and effectively
     nothing else. 550 and 620 were inventions. */
  --w-normal: 400;
  --w-medium: 500;

  --lh-tight: 1.25;
  --lh-body: 1.45; /* 20px on 14px, as measured */
  --ls-label: 0.06em;

  /* ----------------------------------------------------------------- space */

  /* Measured gaps: 2, 4, 6, 8, 10, 16. Tighter than a 4px ramp suggests, and
     the tightness is a large part of how dense they feel without being cramped. */
  --s-0: 2px;
  --s-1: 4px;
  --s-2: 6px;
  --s-3: 8px;
  --s-4: 12px;
  --s-5: 16px;
  --s-6: 24px;
  --s-7: 40px;

  /* ----------------------------------------------------------------- shape */

  /* Measured: 4px on 109 elements, 6px on 66, 8px on 61, pill on a few. The
     earlier 6/9/12 was uniformly one step too round. */
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 8px;
  --r-full: 999px;

  --border: 1px solid var(--c-line);

  --shadow-sheet: 0 16px 48px rgb(0 0 0 / 0.18);
  --shadow-raise: 0 1px 2px rgb(0 0 0 / 0.05);

  /* ---------------------------------------------------------------- motion */

  --m-fast: 100ms;
  --m-base: 160ms;
  --m-ease: cubic-bezier(0.2, 0, 0.2, 1);

  /* ---------------------------------------------------------------- layout */

  /* Lovable's left pane is 511px and its top bar is 48px; Claude Code's prose
     column is ~620px. A 320px thread was too narrow for a transcript carrying
     tool output. */
  --pane-min: 26rem;
  --pane-pct: 34%;
  --bar-h: 48px;
  --control-h: 30px;
  /*
   * Where two panes stop fitting — derived, not chosen.
   *
   * The thread needs --pane-min to stay readable and so does whatever sits
   * beside it, so two panes need twice that plus the divider. Writing it as a
   * device width was the mistake: phones changed and the number did not, and it
   * silently stopped describing anything. This one moves when --pane-min moves,
   * which is the only thing it was ever about.
   */
  --stack-at: 54rem;
  /* A collapsed pane keeps a strip you can grab. Wide enough for a 44px target. */
  --rail: 2.75rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --c-ground: #20201f;
    --c-surface: #252523;

    /* The overlays that make the whole thing cohere. */
    --c-sunk: rgb(255 255 255 / 0.05);
    --c-raise: rgb(255 255 255 / 0.08);
    --c-line: rgb(255 255 255 / 0.12);
    --c-line-strong: rgb(255 255 255 / 0.22);

    --c-ink: #e1e0d9;
    --c-ink-soft: #c3c2b7;
    --c-ink-faint: #a5a49a;
    --c-ink-fainter: #97958d;

    --c-accent: #6fbf95;
    --c-accent-ink: #10231a;
    --c-accent-soft: rgb(111 191 149 / 0.14);

    --c-good: #6fbf95;
    --c-warn: #d9a441;
    --c-warn-soft: rgb(217 164 65 / 0.14);
    --c-bad: #e3796a;
    --c-bad-soft: rgb(227 121 106 / 0.13);

    --c-focus: #6fbf95;

    --shadow-sheet: 0 16px 48px rgb(0 0 0 / 0.55);
    --shadow-raise: 0 1px 2px rgb(0 0 0 / 0.3);
  }
}

:root[data-theme="dark"] {
  --c-ground: #20201f;
  --c-surface: #252523;
  --c-sunk: rgb(255 255 255 / 0.05);
  --c-raise: rgb(255 255 255 / 0.08);
  --c-line: rgb(255 255 255 / 0.12);
  --c-line-strong: rgb(255 255 255 / 0.22);
  --c-ink: #e1e0d9;
  --c-ink-soft: #c3c2b7;
  --c-ink-faint: #a5a49a;
  --c-ink-fainter: #97958d;
  --c-accent: #6fbf95;
  --c-accent-ink: #10231a;
  --c-accent-soft: rgb(111 191 149 / 0.14);
  --c-good: #6fbf95;
  --c-warn: #d9a441;
  --c-warn-soft: rgb(217 164 65 / 0.14);
  --c-bad: #e3796a;
  --c-bad-soft: rgb(227 121 106 / 0.13);
  --c-focus: #6fbf95;
}

:root[data-theme="light"] {
  --c-ground: #faf9f7;
  --c-surface: #ffffff;
  --c-sunk: rgb(0 0 0 / 0.04);
  --c-raise: rgb(0 0 0 / 0.06);
  --c-line: rgb(0 0 0 / 0.11);
  --c-line-strong: rgb(0 0 0 / 0.2);
  --c-ink: #20201f;
  --c-ink-soft: #46453f;
  --c-ink-faint: #6b6a62;
  --c-ink-fainter: #8b897f;
  --c-accent: #2f6f4f;
  --c-accent-ink: #ffffff;
  --c-accent-soft: rgb(47 111 79 / 0.12);
  --c-good: #2f6f4f;
  --c-warn: #8a5a12;
  --c-warn-soft: rgb(138 90 18 / 0.12);
  --c-bad: #a33327;
  --c-bad-soft: rgb(163 51 39 / 0.1);
  --c-focus: #2f6f4f;
}

@media (prefers-reduced-motion: reduce) {
  :root { --m-fast: 0ms; --m-base: 0ms; }
}