/* tokens.css — unified design tokens for the entire Reelax Apps stack.
 *
 * Linked FIRST on every page (Super Admin, customer app, every per-tool app).
 *   <link rel="stylesheet" href="/apps/css/tokens.css?v=1">
 *   <link rel="stylesheet" href="/apps/css/tools-shared.css?v=1">
 *   <link rel="stylesheet" href="css/<tool>.css?v=N">
 *
 * Single source of truth — DO NOT redeclare these in tools-shared.css,
 * superadmin.css, or any per-tool stylesheet. If a token is missing,
 * add it here, not in the consumer.
 *
 * Bump ?v= on every change. v=1 — initial unified drop.
 */

:root {
  /* ── BRAND CHROME (black bar — all tools) ── */
  --rx-brand-bg: #0e0e0e;
  --rx-brand-fg: #ffffff;
  --rx-brand-fg-dim: #878B8B;
  --rx-brand-divider: rgba(255,255,255,.15);

  /* ── ACCENT (per-org, overridden at runtime by applyAccentColor()) ── */
  --rx-accent: #2E7DD1;
  --rx-accent-dim: rgba(46,125,209,.18);
  --rx-accent-border: rgba(46,125,209,.5);
  --rx-accent-strong: rgba(46,125,209,.9);

  /* Legacy alias — Flight Grid + Crew List runtime still writes to --accent.
   * Keep these in sync with --rx-accent until the runtime is migrated. */
  --accent: var(--rx-accent);
  --accent-dim: var(--rx-accent-dim);
  --accent-border: var(--rx-accent-border);
  --accent-strong: var(--rx-accent-strong);

  /* ── EDITORIAL TYPE SYSTEM ── */
  --rx-font-headline: 'Instrument Serif', 'DM Serif Display', Georgia, serif;
  --rx-font-mono: 'JetBrains Mono', 'DM Mono', ui-monospace, monospace;
  --rx-font-body: 'DM Sans', Arial, sans-serif;

  /* ── RADII ── */
  --r: 8px;
  --r2: 12px;
  --r3: 16px;

  /* ── DARK PALETTE (Flight Grid + Super Admin default) ── */
  --bg: #0e0e0e;
  --surface: #171717;
  --card: #1f1f1f;
  --card2: #272727;
  --border: #323232;
  --border2: #444;
  --border3: #5e5e5e;
  --text: #ededed;
  --text2: #aaa;
  --text3: #777;

  /* Semantic status colors (Flight Grid pills) */
  --green: #1D9E75;
  --green-dim: rgba(29,158,117,.18);
  --green-border: rgba(29,158,117,.5);
  --green-text: #5dd4a0;
  --purple: #7F77DD;
  --purple-dim: rgba(127,119,221,.18);
  --purple-border: rgba(127,119,221,.5);
  --purple-text: #b0abf5;
  --blue: #2E7DD1;
  --blue-dim: rgba(46,125,209,.2);
  --blue-border: rgba(46,125,209,.55);
  --blue-text: #8fc3ff;
  --amber: #C98A1A;
  --amber-dim: rgba(201,138,26,.18);
  --amber-border: rgba(201,138,26,.5);
  --amber-text: #e8a84a;
  --red: #E24B4A;
  --red-dim: rgba(226,75,74,.18);
  --red-border: rgba(226,75,74,.5);
  --red-text: #f08080;
  --orange: #D85A30;
  --orange-dim: rgba(216,90,48,.15);
  --orange-text: #ff9466;
  --cyan: #17A2B8;
  --cyan-dim: rgba(23,162,184,.18);
  --cyan-text: #5fd4e8;

  /* ── CREW LIST UI TOKENS (light-default tool — kept for back-compat) ── */
  --ui-bg: #f3f4f6;
  --ui-text: #111827;
  --ui-muted: #878B8B;
  --ui-panel: #fff;
  --ui-panel-border: #e5e7eb;
  --ui-section-border: #f3f4f6;
  --ui-input-bg: #fff;
  --ui-input-border: #e5e7eb;
  --ui-input-focus: #111827;
  --ui-field-label: #374151;
  --ui-hint: #878B8B;
  --ui-logo-box-border: #e5e7eb;
  --ui-logo-box-hover-bg: #f9fafb;
  --ui-logo-box-lbl: #374151;
  --ui-surface: #f9fafb;
  --ui-surface-border: #f3f4f6;
  --ui-preview-bg: #e8e8e8;
  --ui-preview-label: #878B8B;
  --ui-btn-secondary-bg: #ececec;
  --ui-btn-secondary-text: #444;
  --ui-btn-secondary-border: #ddd;
  --ui-danger-bg: #fee2e2;
  --ui-danger: #991b1b;
  --ui-chip-bg: #eef2f7;
  --ui-chip-text: #334155;
  --client-color: #c7c9cc;
}

/* ── LIGHT THEME OVERRIDES ── */
[data-theme="light"] {
  --bg: #f2f2f0;
  --surface: #ffffff;
  --card: #ffffff;
  --card2: #ebebea;
  --border: #d8d8d5;
  --border2: #c0c0bc;
  --border3: #909090;
  --text: #111111;
  --text2: #4a4a4a;
  --text3: #888888;

  --green: #157a5a;
  --green-dim: rgba(21,122,90,.1);
  --green-border: rgba(21,122,90,.35);
  --green-text: #0e6048;
  --purple: #5e57c4;
  --purple-dim: rgba(94,87,196,.1);
  --purple-border: rgba(94,87,196,.35);
  --purple-text: #48409e;
  --blue: #1a5fa8;
  --blue-dim: rgba(26,95,168,.1);
  --blue-border: rgba(26,95,168,.35);
  --blue-text: #134983;
  --amber: #95660d;
  --amber-dim: rgba(149,102,13,.1);
  --amber-border: rgba(149,102,13,.35);
  --amber-text: #7a5208;
  --red: #c53030;
  --red-dim: rgba(197,48,48,.1);
  --red-border: rgba(197,48,48,.35);
  --red-text: #9c2424;
  --orange: #b8451f;
  --orange-dim: rgba(184,69,31,.1);
  --orange-text: #8c3416;
  --cyan: #0e7c8c;
  --cyan-dim: rgba(14,124,140,.1);
  --cyan-text: #0a5d6a;

  --rx-accent: #1a5fa8;
  --rx-accent-dim: rgba(26,95,168,.1);
  --rx-accent-border: rgba(26,95,168,.35);
  --rx-accent-strong: rgba(26,95,168,.9);
  --accent: var(--rx-accent);
  --accent-dim: var(--rx-accent-dim);
  --accent-border: var(--rx-accent-border);
  --accent-strong: var(--rx-accent-strong);
}