/* ============================================================================
   PloroV2 — the "modern" theme: tokens
   ----------------------------------------------------------------------------
   Part of the split theme (themes/*.css — load order in themes/README.md).
   This file holds the design tokens: colour, type, spacing, radius, shadow,
   motion — every value a custom property, so light + dark both derive from
   the same tokens via prefers-color-scheme.

   Design intent: quiet, precise, high-information-density. Hairline borders,
   flat surfaces, a single blue accent used sparingly, tabular numerals,
   uppercase micro-labels, uppercase nothing else. Restraint over decoration.

   Principles:
     • Tokens first. Every colour/radius/shadow is a custom property.
     • Light + dark from the same tokens, via prefers-color-scheme.
     • Zero dependencies — plain CSS shipped with the app.
   ========================================================================== */

/* ---- 1. Tokens ---------------------------------------------------------- */

:root {
   /* brand — a single restrained blue, used sparingly */
   --ta-accent: #3a6df0;
   --ta-accent-hover: #2b56c8;
   --ta-accent-soft: rgba(58, 109, 240, 0.1);

   /* landing CTA — aliased to the single brand accent. One colour for
     sign-up, sign-in, landing and in-app chrome, configured once via
     --ta-accent (or an app's accent_hue/brand_color) — never set these
     independently. */
   --ta-teal: var(--ta-accent);
   --ta-teal-hover: var(--ta-accent-hover);
   --ta-teal-soft: var(--ta-accent-soft);

   /* neutrals */
   --ta-bg: #f5f6f8;
   --ta-surface: #ffffff;
   --ta-surface-2: #f0f2f5;
   /* A pane's edge is TRANSLUCENT, not a grey line. Over the ambient field the
     reference's border lets the ground through, so a card edge shifts subtly
     with whatever it sits on instead of drawing the same flat grey everywhere —
     the difference between a pane and a box. (Matches the reference's
     `--border: oklch(0.5 0.02 262 / 16%)`; `--input` is its 22% step.) */
   --ta-border: oklch(0.5 0.02 262 / 16%);
   --ta-border-strong: oklch(0.5 0.02 262 / 22%);
   /* PARITY B10: the reference's control heights. One control height governs
     every button/input/select; chips and badges take the small step. Nothing
     may derive height from padding (old app.css `--h-control`). */
   --h-control: 34px;
   --h-control-sm: 22px;
   /* The translucent card ground — a pane floating on the field. Distinct from
     --ta-surface, which stays OPAQUE for chrome that must not read through
     (menus, dialogs, sticky headers). */
   --ta-card: oklch(1 0 0 / 0.66);
   --ta-text: #171a20;
   --ta-muted: #5b6270;
   --ta-faint: #98a0ab;

   /* status — the reference's semantic quartet, in oklch so light and dark are
     the same hue at a different lightness rather than two hand-picked hexes.
     The soft/ink steps that pair with these live with the tone triples in
     feedback.css. */
   --ta-ok: oklch(0.62 0.15 155);
   --ta-err: oklch(0.58 0.223 25);
   --ta-warn: oklch(0.72 0.15 75);
   --ta-info: oklch(0.6 0.13 236);
   --ta-warn-soft: oklch(0.95 0.05 85);

   /* geometry — ONE base radius, eight proportional steps, each min()-capped.
     This is the reference platform's own fan-out: a corner is never eyeballed,
     it is a ratio of the base, and the cap means a tenant who asks for a very
     round base still can't produce a pill. Controls sit at --ta-r (0.8),
     cards at --ta-r-xl (1.4), panels/sheets at --ta-r-2xl (1.8). A square
     tenant (base 0) stays square all the way up, because every step is a
     multiple of the base. Per-app `radius:` re-emits this same scale from its
     own base (see renderer.rs::radius_scale). */
   --ta-radius: 10px;
   --ta-r-xs: min(calc(var(--ta-radius) * 0.4), 8px);
   --ta-r-sm: min(calc(var(--ta-radius) * 0.6), 10px);
   --ta-r: min(calc(var(--ta-radius) * 0.8), 12px);
   --ta-r-lg: min(var(--ta-radius), 16px);
   --ta-r-xl: min(calc(var(--ta-radius) * 1.4), 20px);
   --ta-r-2xl: min(calc(var(--ta-radius) * 1.8), 24px);
   --ta-r-3xl: min(calc(var(--ta-radius) * 2.2), 26px);
   --ta-r-4xl: min(calc(var(--ta-radius) * 2.6), 28px);
   --ta-shadow-sm: 0 1px 2px rgba(23, 26, 32, 0.05);
   --ta-shadow: 0 1px 3px rgba(23, 26, 32, 0.05), 0 4px 16px rgba(23, 26, 32, 0.04);

   /* glassy topbar surface — translucent so content blurs through the bar */
   --ta-glass: rgba(255, 255, 255, 0.72);

   /* PARITY B10: the reference's `--glass-fill` — the translucent outline
     surface (`bg-(--glass-fill)` on the mail-pulse Sync button). Same oklch
     as the reference's light value; dark overridden below. */
   --glass-fill: oklch(1 0 0 / 0.55);

   /* type — Inter everywhere (weight 100 thin base) with graceful
     system fallbacks for offline/blocked-font scenarios */
   --ta-font: "Inter", -apple-system, "system-ui", "SF Pro Text", system-ui,
      "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif,
      "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   --ta-mono: "Inter", ui-monospace, "SF Mono", "SFMono-Regular", Menlo,
      Consolas, "Liberation Mono", monospace;

   /* layout */
   --container-max: 74rem;

   /* landing rhythm — one gap between marketing sections */
   --section-gap: 4.5rem;
}

@media (prefers-color-scheme: dark) {

   /* System dark — only when the viewer hasn't pinned a theme manually. A
     manual choice (the sidebar theme toggle) always wins over the system. */
   :root:not([data-theme]) {
      --ta-accent: #5b8cff;
      --ta-accent-hover: #7ba4ff;
      --ta-accent-soft: rgba(91, 140, 255, 0.14);
      --ta-ok: oklch(0.68 0.15 155);
      --ta-err: oklch(0.68 0.2 25);
      --ta-warn: oklch(0.76 0.15 75);
      --ta-info: oklch(0.68 0.13 236);
      --ta-warn-soft: oklch(0.3 0.05 80);
      --ta-bg: #101318;
      --ta-surface: #161a21;
      --ta-surface-2: #1b202a;
      --ta-border: oklch(1 0 0 / 12%);
      --ta-border-strong: oklch(1 0 0 / 16%);
      --ta-card: oklch(0.28 0.015 262 / 0.5);
      --glass-fill: oklch(0.3 0.016 262 / 0.42);
      --ta-text: #e9ecf2;
      --ta-muted: #9aa3b0;
      --ta-faint: #6d7482;
      --ta-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
      --ta-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 4px 16px rgba(0, 0, 0, 0.25);
      --ta-glass: rgba(22, 26, 33, 0.72);
   }

   /* Dark tone tints live with the rest of the tone triples in feedback.css —
     they need --tone/--tone-soft/--tone-ink moved together, and defining a
     lone --tone-soft here (at higher specificity) silently beat that file. */
}

/* Manual dark theme (the sidebar theme toggle) — wins over the system. */
:root[data-theme="dark"] {
   --ta-accent: #5b8cff;
   --ta-ok: oklch(0.68 0.15 155);
   --ta-err: oklch(0.68 0.2 25);
   --ta-warn: oklch(0.76 0.15 75);
   --ta-info: oklch(0.68 0.13 236);
   --ta-warn-soft: oklch(0.3 0.05 80);
   --ta-accent-hover: #7ba4ff;
   --ta-accent-soft: rgba(91, 140, 255, 0.14);
   --ta-bg: #101318;
   --ta-surface: #161a21;
   --ta-surface-2: #1b202a;
   --ta-border: oklch(1 0 0 / 12%);
   --ta-border-strong: oklch(1 0 0 / 16%);
   --ta-card: oklch(0.28 0.015 262 / 0.5);
   --ta-text: #e9ecf2;
   --ta-muted: #9aa3b0;
   --ta-faint: #6d7482;
   --ta-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
   --ta-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 4px 16px rgba(0, 0, 0, 0.25);
   --ta-glass: rgba(22, 26, 33, 0.72);
}

/* A pinned light theme wins over a dark system (see the system dark block
   above, which now skips :root[data-theme]). */
:root[data-theme="light"] {
   --ta-accent: #3a6df0;
   --ta-ok: oklch(0.62 0.15 155);
   --ta-err: oklch(0.58 0.223 25);
   --ta-warn: oklch(0.72 0.15 75);
   --ta-info: oklch(0.6 0.13 236);
   --ta-warn-soft: oklch(0.95 0.05 85);
   --ta-accent-hover: #2b56c8;
   --ta-accent-soft: rgba(58, 109, 240, 0.1);
   --ta-bg: #f5f6f8;
   --ta-surface: #ffffff;
   --ta-surface-2: #f0f2f5;
   --ta-border: oklch(0.5 0.02 262 / 16%);
   --ta-border-strong: oklch(0.5 0.02 262 / 22%);
   --ta-card: oklch(1 0 0 / 0.66);
   --ta-text: #171a20;
   --ta-muted: #5b6270;
   --ta-faint: #98a0ab;
   --ta-shadow-sm: 0 1px 2px rgba(23, 26, 32, 0.05);
   --ta-shadow: 0 1px 3px rgba(23, 26, 32, 0.05), 0 4px 16px rgba(23, 26, 32, 0.04);
   --ta-glass: rgba(255, 255, 255, 0.72);
}