/* ==========================================================================
   SUITE THEME — the canonical token sheet (shared-theme plan)
   Served live by the hub at `http://127.0.0.1:4040/suite-theme.css`, next to
   `chrome.js` and `suite-theme.js`. Every application declares and consumes
   these SAME custom-property names for surfaces, text, borders, radius,
   motion and accent — a palette change is one edit here, and every
   application picks it up on reload. No vendored copies, no per-repo token
   definitions of the core set (the reference copy the hub itself builds
   against lives at `src/styles/suite-theme.css` and must stay identical).

   Structure (the shape pik's theme model established, now central):
     1. `:root` light block — Tier-1 semantic core, the hub's Apple-HIG values.
     2. `:root[data-theme="dark"]` (+ the prefers-color-scheme twin for
        "system") — Tier-1 semantic core, pik's dark neutral ladder:
        #1E1E1E background, #2C2C2C panel, #D4D4D4 foreground, #a1a1a1 muted,
        hairline borders, --radius 0.5rem.
     3. Tier-2 chrome-contract aliases + derived accent tokens — the names
        `chrome.js` and the hub family already read (`--text-primary`,
        `--bg-surface`, `--bg-popover`, `--bg-inset/hover/active`,
        `--border-subtle`, `--color-primary`, `--radius-md`, `--ease-apple`),
        plus the accent derivatives (`--accent-hover`, `--accent-soft`,
        `--accent-contrast`). The per-app `SUITE_TOKEN_SHIM`s this replaces
        have been deleted from the applications.

   The runtime (`suite-theme.js`, served next to this file) owns the state:
   it writes `data-theme` on <html> ("light"/"dark"; "system" removes the
   attribute so the media query below resolves it) and the accent block
   (`--accent`, `--accent-contrast`) on :root from the register accent or the
   user's per-app override. `--accent-contrast` flips black/white text by the
   accent's measured luminance, so yellow-class accents stay readable; the
   static `#ffffff` below only covers a host that failed to load the runtime.

   The bar's fallbacks in chrome.js stay untouched — they only ever cover a
   host that failed to load this sheet.

   Host integration per application stays minimal by design:
     <link rel="stylesheet" href="http://127.0.0.1:4040/suite-theme.css" />
     <script src="http://127.0.0.1:4040/suite-theme.js" data-app="pik" defer></script>
   plus the 3-line pre-paint snippet documented in the suite-theme.js header,
   which sets `data-theme` from storage before first paint — no flash on
   reload. Applications keep a SMALL extension layer for genuinely
   app-specific tokens, always derived from this core, never redefining it.
   ========================================================================== */

:root {
  color-scheme: light;

  /* ---- Tier 1 — semantic core (pik vocabulary, single source of truth) ---- */
  --background: #f5f5f7;
  --foreground: #1d1d1f;
  --panel-background: #ffffff;
  --secondary: rgba(0, 0, 0, 0.05);
  --secondary-foreground: #1d1d1f;
  --muted: rgba(0, 0, 0, 0.04);
  --muted-foreground: #6e6e73;
  /* Suite default; the runtime writes the application's register accent (or
     the user's per-app override) over it. */
  --accent: #007aff;
  --accent-foreground: #ffffff;
  --border: rgba(0, 0, 0, 0.08);
  --popover: #f4f4f6;
  --popover-foreground: #1d1d1f;
  --ring: var(--accent);
  --radius: 0.5rem;
  --danger: #ff3b30;
  --success: #34c759;
  --warning: #ff9500;

  /* Mode-specific surfaces and elevation (shadows stay subtle on dark). */
  --bg-overlay: rgba(0, 0, 0, 0.35);
  --bg-elevated: var(--panel-background);
  --shadow-apple: 0 4px 24px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-panel: 0 12px 40px rgba(0, 0, 0, 0.14), 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-popover: 0 8px 32px rgba(0, 0, 0, 0.18), 0 1px 3px rgba(0, 0, 0, 0.1);

  /* ---- Derived accent tokens ----
     The runtime rewrites --accent (register accent / user override) and
     --accent-contrast (measured luminance: yellow-class accents flip to
     black text); the mixes below follow along for free. Accent-as-text
     uses --accent-hover (darkens toward the background in light mode). */
  --accent-contrast: #ffffff;
  --accent-hover: color-mix(in srgb, var(--accent) 90%, var(--background));
  --accent-soft: color-mix(in srgb, var(--accent) 12%, transparent);

  /* ---- Tier 2 — chrome-contract aliases (what chrome.js and the hub family read).
     Derived from the core, so light/dark and per-app accents flow in for free. */
  --text-primary: var(--foreground);
  --text-secondary: color-mix(in srgb, var(--foreground) 72%, transparent);
  --text-tertiary: color-mix(in srgb, var(--foreground) 50%, transparent);
  --text-on-accent: var(--accent-contrast);
  --bg-app: var(--background);
  --bg-surface: var(--panel-background);
  --bg-surface-solid: var(--panel-background);
  --bg-popover: var(--popover);
  --bg-inset: color-mix(in srgb, var(--foreground) 4%, transparent);
  --bg-hover: color-mix(in srgb, var(--foreground) 7%, transparent);
  --bg-active: color-mix(in srgb, var(--foreground) 12%, transparent);
  --border-subtle: var(--border);
  --border-strong: color-mix(in srgb, var(--foreground) 15%, transparent);
  --border-focus: color-mix(in srgb, var(--accent) 55%, transparent);
  --color-primary: var(--accent);
  --color-primary-hover: var(--accent-hover);
  --color-primary-bg: var(--accent-soft);
  --color-destructive: var(--danger);
  --color-success: var(--success);
  --color-warning: var(--warning);
  --primary: var(--accent);
  --primary-foreground: var(--accent-contrast);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: var(--radius);
  --radius-lg: calc(var(--radius) + 2px);
  --radius-xl: calc(var(--radius) + 4px);

  /* ---- Typography & motion ---- */
  --font-system: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "SF Mono", ui-monospace, "Cascadia Code", Menlo, Consolas, monospace;
  --ease-apple: cubic-bezier(0.25, 0.1, 0.25, 1);
  --duration-fast: 140ms;
  --duration-normal: 220ms;
}

/* Dark mode — pik's neutral ladder, verbatim.
   - explicit: <html data-theme="dark">
   - system:   OS dark preference while data-theme is unset or "system" */
:root[data-theme="dark"] {
  color-scheme: dark;
  --background: #1E1E1E;
  --foreground: #D4D4D4;
  --panel-background: #2C2C2C;
  --secondary: #2C2C2C;
  --secondary-foreground: #D4D4D4;
  --muted: #2C2C2C;
  --muted-foreground: #a1a1a1;
  --accent: #007aff;
  --accent-foreground: #FFFFFF;
  /* Hairline: near-invisible gray so dividers never glow on dark surfaces. */
  --border: rgba(255, 255, 255, 0.12);
  --popover: #1E1E1E;
  --popover-foreground: #D4D4D4;
  --danger: #e5484d;
  --success: #30d158;
  --warning: #ff9f0a;

  --bg-overlay: rgba(0, 0, 0, 0.55);
  --bg-elevated: color-mix(in srgb, var(--panel-background) 88%, white);
  --shadow-apple: 0 3px 18px rgba(255, 255, 255, 0.04), 0 1px 3px rgba(255, 255, 255, 0.03);
  --shadow-panel: 0 12px 32px rgba(255, 255, 255, 0.035), 0 2px 10px rgba(255, 255, 255, 0.025);
  --shadow-popover: 0 9px 28px rgba(255, 255, 255, 0.04), 0 1px 4px rgba(255, 255, 255, 0.03);

  --accent-hover: color-mix(in srgb, var(--accent) 80%, white);
  --accent-soft: color-mix(in srgb, var(--accent) 24%, transparent);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --background: #1E1E1E;
    --foreground: #D4D4D4;
    --panel-background: #2C2C2C;
    --secondary: #2C2C2C;
    --secondary-foreground: #D4D4D4;
    --muted: #2C2C2C;
    --muted-foreground: #a1a1a1;
    --accent: #007aff;
    --accent-foreground: #FFFFFF;
    --border: rgba(255, 255, 255, 0.12);
    --popover: #1E1E1E;
    --popover-foreground: #D4D4D4;
    --danger: #e5484d;
    --success: #30d158;
    --warning: #ff9f0a;

    --bg-overlay: rgba(0, 0, 0, 0.55);
    --bg-elevated: color-mix(in srgb, var(--panel-background) 88%, white);
    --shadow-apple: 0 3px 18px rgba(255, 255, 255, 0.04), 0 1px 3px rgba(255, 255, 255, 0.03);
    --shadow-panel: 0 12px 32px rgba(255, 255, 255, 0.035), 0 2px 10px rgba(255, 255, 255, 0.025);
    --shadow-popover: 0 9px 28px rgba(255, 255, 255, 0.04), 0 1px 4px rgba(255, 255, 255, 0.03);

    --accent-hover: color-mix(in srgb, var(--accent) 80%, white);
    --accent-soft: color-mix(in srgb, var(--accent) 24%, transparent);
  }
}

/* ---------- Scrollbars: minimal, macOS style ----------
   The sheet owns them (applications may override in their own layer). */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}
*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
*::-webkit-scrollbar-track {
  background: transparent;
}
*::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover {
  background: var(--muted-foreground);
  border: 2px solid transparent;
  background-clip: content-box;
}

/* Text selection follows the accent. */
::selection {
  background: color-mix(in srgb, var(--accent) 25%, transparent);
}

/* ==========================================================================
   INSTANT THEME SWITCH — flipping data-theme must never animate.
   The runtime (suite-theme.js) pins [data-theme-switching] on <html> for the
   one painted frame in which it writes data-theme; the hub's React surface
   (useTheme) pins the same attribute around its own flip. While the pin is
   present every transition is suspended, so the new theme lands on the very
   next paint. Micro-interactions (hover, focus, press, drag) keep their own
   transitions — only the theme flip is instant.
   ========================================================================== */
:root[data-theme-switching],
:root[data-theme-switching] *,
:root[data-theme-switching] *::before,
:root[data-theme-switching] *::after {
  transition: none !important;
}