/* Design tokens for the Atech-UI (Mitchell) design system — the studio's design
   as of the use-mitchells-ui port (2026-08-24). This file REPLACES the previous
   token sheet, which was copied verbatim from frontend/src/app/globals.css; the
   studio no longer tracks production's palette — it tracks Atech-UI/index.html,
   translated from Tailwind classes to these tokens (source read in full,
   2026-08-24). Variable NAMES are unchanged so every consumer keeps resolving.

   Light is :root, dark is .dark (class strategy, toggled by theme.js — same as
   before). Atech-UI ships light-only; the .dark block is a same-hue inversion
   designed in its style, not copied from anywhere.

   The Tailwind "neutral" family is the base: page #fafafa, ink #171717, hairline
   borders as black/white alpha. Contrast discipline carried over from the old
   sheet (each was a measured WCAG failure once — do not regress them):
     --text-secondary  #525252  7.3:1 on #fafafa
     --text-muted      #737373  4.6:1 on #fafafa (AA normal, barely — used for
                       the mono micro-labels; Atech-UI uses neutral-400 #a3a3a3
                       at 2.4:1, which this port deliberately does NOT copy)
     --input-placeholder #6e6e6e ≈4.7:1 on --input-bg #f4f4f5
   Dark equivalents each clear 4.5:1 on their stated ground. */

/* ── Brand aurora ──────────────────────────────────────────────────────────
   THE single definition of the Atech aurora gradient (frontend ShimmerText
   stops, vendored 2026-09-11).

   Agents / future edits — change ONLY the custom properties below. To paint
   the brand gradient, use `var(--aurora-gradient)` or the classes
   `.aurora-text` / `.shimmer-text`. Never paste these hex stops, never
   reconstruct this linear-gradient elsewhere. The reconciler is
   `p2p/tests/test_aurora_gradient.py`.

   Motion: `--aurora-phase` (0→1→0) is the ONE shimmer clock, animated on
   `:root`. Canvas readers (microbot.js) and CSS marks both consume it —
   never a per-element `@keyframes` of background-position.
   ──────────────────────────────────────────────────────────────────────── */
@property --aurora-phase {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

:root {
  --aurora-mint: #0ff2b2;
  --aurora-cyan: #22d3ee;
  --aurora-indigo: #6366f1;
  --aurora-purple: #a855f7;
  --aurora-gradient: linear-gradient(
    120deg,
    var(--aurora-mint),
    var(--aurora-cyan),
    var(--aurora-indigo),
    var(--aurora-purple),
    var(--aurora-cyan),
    var(--aurora-mint)
  );
  /* Window multiplier for the sliding ramp (CSS background-size and canvas). */
  --aurora-shimmer-span: 3;
  --aurora-shimmer-duration: 24s;
  --aurora-phase: 0;
  animation: aurora-phase var(--aurora-shimmer-duration) ease-in-out infinite;
}

@keyframes aurora-phase {
  0%   { --aurora-phase: 0; }
  50%  { --aurora-phase: 1; }
  100% { --aurora-phase: 0; }
}

:root {
  /* Browser-painted surfaces (scrollbars, native controls, caret) follow the
     mode; set per class because theme.js toggles .dark at runtime. */
  color-scheme: light;

  --background: #fafafa;
  --foreground: #171717;

  --nav-bg: rgba(255, 255, 255, 0.85);   /* sticky header: white/85 + blur */
  --nav-text: #171717;
  --nav-border: rgba(0, 0, 0, 0.04);

  --text-primary: #171717;
  --text-secondary: #525252;
  --text-muted: #737373;

  --surface-primary: #ffffff;
  --surface-secondary: #fafafa;          /* inner tile on a white card */
  --card-bg: #ffffff;
  --card-border: rgba(0, 0, 0, 0.05);
  --card-border-hover: rgba(0, 0, 0, 0.09);

  --input-bg: #f4f4f5;
  --input-border: rgba(0, 0, 0, 0.05);
  --input-text: #171717;
  --input-placeholder: #6e6e6e;
  --input-focus-ring: rgba(0, 0, 0, 0.2);

  --button-primary-bg: #171717;
  --button-primary-bg-hover: #000000;
  --button-primary-text: #ffffff;
  --button-secondary-bg: #f5f5f5;
  --button-secondary-bg-hover: #e5e5e5;
  --button-secondary-border: rgba(0, 0, 0, 0.05);
  --button-secondary-border-hover: rgba(0, 0, 0, 0.12);
  --button-secondary-text: #171717;

  --border-light: rgba(0, 0, 0, 0.05);
  --border-medium: rgba(0, 0, 0, 0.09);
  --border-dark: #171717;

  --glass-bg: rgba(255, 255, 255, 0.9);
  --glass-border: rgba(0, 0, 0, 0.08);
  --glass-bg-hover: rgba(0, 0, 0, 0.05);
  --glass-bg-strong: rgba(255, 255, 255, 0.95);
  --glass-border-strong: rgba(0, 0, 0, 0.12);
  --glass-bg-input: #f4f4f5;
  --glass-border-input: rgba(0, 0, 0, 0.05);

  --glass-card-bg: #ffffff;
  --glass-card-border: rgba(0, 0, 0, 0.05);
  --glass-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.02), 0 4px 12px -4px rgba(0, 0, 0, 0.02);
  --glass-card-shadow-hover: 0 2px 6px rgba(0, 0, 0, 0.04), 0 8px 20px -6px rgba(0, 0, 0, 0.05);

  /* Phase/check state colors. The *-text values are AA on white; the *-bg pairs
     are the Atech-UI badge recipe: 100-tier bg with 700-tier text (Atech-UI
     itself mixes 700/800 text; 700 is what these values are). */
  --state-ok: #047857;
  --state-ok-bg: #d1fae5;
  --state-warn: #b45309;
  --state-warn-bg: #fef3c7;
  /* crit is red-700, not 600: #dc2626 measured 3.95:1 on the badge bg at the
     9px w700 the failure badges use (independent review, 2026-08-24) — and the
     failure indicators are the one place this palette must never be the weak
     pair. #b91c1c: 5.3:1 on --state-crit-bg, 5.9:1 on #fafafa. */
  --state-crit: #b91c1c;
  --state-crit-bg: #fee2e2;
  --state-idle-bg: #efefef;

  /* Info/highlight pair (Atech-UI uses indigo for informational badges). */
  --state-info: #4338ca;
  --state-info-bg: #e0e7ff;

  /* The dark accent tile: Atech-UI renders code, metrics and telemetry as
     near-black panels ON the light page. Same values in both modes. */
  --tile-dark-bg: #171717;
  --tile-dark-border: rgba(255, 255, 255, 0.08);
  --tile-dark-text: #e5e5e5;
  --tile-dark-muted: #a3a3a3;

  /* Accent vocabulary — the Atech-UI hue family, per-mode. The old UI repeated
     ~30 raw aurora hexes (#22d3ee #0ff2b2 #a855f7 #f5a524 …) inline; those are
     now these tokens so both modes resolve. Light values are the 600/700 tier
     (AA on light surfaces); .dark re-values to the 400 tier. Inside a
     .dark-tile surface — dark in BOTH modes — use the 400-tier literals
     (#22d3ee #34d399 #fbbf24 #818cf8 #a855f7): they are mode-invariant there. */
  --acc-cyan: #0284c7;     /* live / running / interactive  (was #22d3ee) */
  --acc-emerald: #059669;  /* ok / geometry                  (was #0ff2b2) */
  --acc-indigo: #4f46e5;   /* llm / info                     (was #818cf8) */
  --acc-purple: #9333ea;   /* model thinking                 (was #a855f7) */
  --acc-amber: #b45309;    /* awaiting / stale / caution     (was #f5a524) */
}

.dark {
  color-scheme: dark;

  --background: #0a0a0a;
  --foreground: #f5f5f5;

  --nav-bg: rgba(10, 10, 10, 0.85);
  --nav-text: #f5f5f5;
  --nav-border: rgba(255, 255, 255, 0.06);

  --text-primary: #f5f5f5;
  --text-secondary: #a3a3a3;
  --text-muted: #8a8a8a;

  --surface-primary: #0a0a0a;
  --surface-secondary: #1a1a1a;
  --card-bg: #141414;
  --card-border: rgba(255, 255, 255, 0.07);
  --card-border-hover: rgba(255, 255, 255, 0.16);

  --input-bg: #1a1a1a;
  --input-border: rgba(255, 255, 255, 0.07);
  --input-text: #f5f5f5;
  --input-placeholder: #8f8f8f;
  --input-focus-ring: rgba(255, 255, 255, 0.25);

  --button-primary-bg: #f5f5f5;
  --button-primary-bg-hover: #ffffff;
  --button-primary-text: #111111;
  --button-secondary-bg: #1f1f1f;
  --button-secondary-bg-hover: #2a2a2a;
  --button-secondary-border: rgba(255, 255, 255, 0.07);
  --button-secondary-border-hover: rgba(255, 255, 255, 0.2);
  --button-secondary-text: #f5f5f5;

  --border-light: rgba(255, 255, 255, 0.06);
  --border-medium: rgba(255, 255, 255, 0.1);
  --border-dark: #e5e5e5;

  --glass-bg: rgba(20, 20, 20, 0.9);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-bg-hover: rgba(255, 255, 255, 0.06);
  --glass-bg-strong: rgba(20, 20, 20, 0.95);
  --glass-border-strong: rgba(255, 255, 255, 0.14);
  --glass-bg-input: #1a1a1a;
  --glass-border-input: rgba(255, 255, 255, 0.07);

  --glass-card-bg: #141414;
  --glass-card-border: rgba(255, 255, 255, 0.07);
  --glass-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  --glass-card-shadow-hover: 0 2px 8px rgba(0, 0, 0, 0.5);

  --state-ok: #34d399;
  --state-ok-bg: #112b21;
  --state-warn: #fbbf24;
  --state-warn-bg: #2b2211;
  --state-crit: #f87171;
  --state-crit-bg: #2d1616;
  --state-idle-bg: #222222;

  --state-info: #a5b4fc;
  --state-info-bg: #1c2040;

  --tile-dark-bg: #171717;
  --tile-dark-border: rgba(255, 255, 255, 0.08);
  --tile-dark-text: #e5e5e5;
  --tile-dark-muted: #a3a3a3;

  --acc-cyan: var(--aurora-cyan);
  --acc-emerald: #34d399;
  --acc-indigo: #818cf8;
  --acc-purple: var(--aurora-purple);
  --acc-amber: #fbbf24;
}

/* .shimmer-text is the older class name for the same mark (auth eyebrow etc.).
   Phase comes from :root's --aurora-phase — never a private animation here. */
.shimmer-text,
.aurora-text {
  background-image: var(--aurora-gradient);
  background-size: calc(var(--aurora-shimmer-span) * 100%) 100%;
  background-position: calc(var(--aurora-phase) * 100%) 50%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
@media (prefers-reduced-motion: reduce) {
  :root {
    animation: none;
    --aurora-phase: 0;
  }
}

/* ── Accent system. Names match p2p/accounts.py THEME_ACCENTS exactly —
   theme.js sets `data-accent` on <html> and PATCH /api/account/profile 422s on
   any other name, so the NAMES are server vocabulary and stay. Aurora-family
   VALUES come from --aurora-* above (the ONE palette); ember is the amber
   pair outside that family. Absent attribute ≡ aurora. */
:root {
  --accent: var(--aurora-cyan);
  --accent-2: var(--aurora-mint);
  --accent-soft: color-mix(in srgb, var(--accent) 14%, transparent);
  /* The accent, pulled toward the page's own ink until it clears WCAG AA at
     SMALL sizes. Raw --aurora-cyan is decorative on its own — body-sized link
     text goes through --accent-ink.

     Mixing toward --text-primary rather than toward black is what makes this
     one declaration correct in both themes: light ink is #171717 so the accent
     darkens, dark ink is #f5f5f5 so it lightens. It also survives all six
     [data-accent] palettes, which a hardcoded hex would not. */
  --accent-ink: color-mix(in srgb, var(--accent) 72%, var(--text-primary));
}
[data-accent="aurora"] { --accent: var(--aurora-cyan); --accent-2: var(--aurora-mint); }
[data-accent="ember"]  { --accent: #d97706; --accent-2: #facc15; }
[data-accent="moss"]   { --accent: var(--aurora-mint); --accent-2: var(--aurora-cyan); }
[data-accent="ocean"]  { --accent: var(--aurora-indigo); --accent-2: var(--aurora-cyan); }
[data-accent="violet"] { --accent: var(--aurora-purple); --accent-2: var(--aurora-indigo); }
[data-accent="mono"]   { --accent: var(--text-primary); --accent-2: var(--text-secondary); }