/**
 * PARTITA STUDIO — one palette for the site, the account page and the admin panel.
 *
 * The values mirror the desktop app's dark theme (`app/src/index.css`), so the
 * site, the account page, the admin panel and the application itself look like
 * one product. Surface steps and accent are the same numbers the app uses:
 * #181818 deepest, #1f1f1f main, #252526 raised, #2b2b2b borders, accent #3b82f6.
 *
 * Two naming families are exposed on purpose:
 *  - `--bg-*` / `--text-*` / semantic colours — used by the landing page;
 *  - `--surface-*` — used by the account and admin stylesheet.
 * They point at the same values, so the two surfaces cannot drift apart.
 */

:root {
  color-scheme: dark;

  /* ── Brand (identical to the app accent ramp) ──────────────────────────── */
  --accent: #3b82f6;          /* fills and borders — the app's accent */
  --accent-hover: #2563eb;
  --accent-light: #60a5fa;
  /* Accent as TEXT: #3b82f6 is only 4.5:1 on dark, so links and accent labels
     use the lighter step (6.5:1) while buttons keep the brand fill. */
  --accent-text: #60a5fa;
  --accent-dark: #1d4ed8;
  --accent-soft: rgba(59, 130, 246, 0.12);

  /* ── Surfaces (the app's dark steps) ───────────────────────────────────── */
  --bg-deep: #181818;         /* page background — app surface-950 */
  --bg-main: #1f1f1f;         /* app surface-900 */
  --bg-card: #1f1f1f;
  --bg-card-hover: #252526;   /* app surface-800 */
  --bg-elevated: #252526;
  --bg-tint: #252526;         /* quiet block inside a card */
  --border: #2b2b2b;          /* app surface-700 */
  --border-strong: #3c3c3c;

  /* ── Text (the app's foreground steps) ─────────────────────────────────── */
  --text-primary: #e8e8e8;    /* 13.5:1 on --bg-card */
  --text-secondary: #acacac;  /* 7.3:1 */
  /* One step lighter than the app's muted grey: on the site this colour carries
     real labels (dates, references, hints), so it has to clear AA on every
     surface, not just look quiet. */
  --text-muted: #969696;      /* 5.6:1 on --bg-card, 5.2:1 on --bg-tint */

  /* ── Semantic colours: bright ink + translucent fill ──────────────────── */
  --success: #4ade80;
  --success-soft: rgba(34, 197, 94, 0.14);
  --warning: #fbbf24;
  --warning-soft: rgba(245, 158, 11, 0.14);
  --danger: #f87171;
  --danger-soft: rgba(239, 68, 68, 0.14);
  --info: #60a5fa;
  --info-soft: rgba(59, 130, 246, 0.14);

  /* Instrument-family accents — the same values as the app's tailwind config. */
  --green: #22c55e;
  --yellow: #eab308;
  --purple: #a855f7;
  --red: #ef4444;
  --orange: #f97316;
  --cyan: #06b6d4;
  --pink: #ec4899;

  /* ── Account/admin aliases (same palette, different naming) ────────────── */
  --surface-950: var(--bg-deep);
  --surface-900: var(--bg-main);
  --surface-800: var(--bg-card-hover);
  --surface-700: var(--border);
  --surface-600: var(--border-strong);
  --surface-500: var(--text-muted);
  --surface-400: var(--text-secondary);
  --surface-300: #d6d6d6;
  --surface-200: var(--text-primary);
  --surface-100: #f5f5f5;

  /* ── Shape and depth ───────────────────────────────────────────────────── */
  /* Square geometry on purpose: crisp editorial edges, the same on all three
     surfaces and in the application itself. */
  --radius-sm: 0;
  --radius-md: 2px;
  --radius-lg: 2px;
  --radius-xl: 4px;
  --radius-btn: 0;
  --radius-pill: 2px;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30);
  --shadow-card: 0 12px 32px rgba(0, 0, 0, 0.32);
  --shadow-raised: 0 18px 48px rgba(0, 0, 0, 0.40);
  --shadow-window: 0 24px 80px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.04);
  --max: 1120px;
}