/* tokens.css — QI Design System tokens
 * Ported from QIDesignSystem.swift (WHYBLE_TV_NODE/ios/WhybleNode/Components/)
 * ADR 0002: Port QI design system from iOS SwiftUI to CSS
 */

:root {
  /* ── Base ──────────────────────────────────────────── */
  --qi-bg: #050B09;
  --qi-topbar-h: 48px;
  --qi-surface: rgba(255, 255, 255, 0.06);
  --qi-surface-raised: rgba(15, 27, 22, 0.74);
  --qi-text: #F5F7F8;
  --qi-text-muted: #9AA5A8;

  /* ── Accents ───────────────────────────────────────── */
  --qi-accent: #66FCF1;          /* turquoise/cyan — signature QI color */
  --qi-energy: #35C99A;          /* green */
  --qi-trust: #D4AF37;           /* gold — missions */
  --qi-error: #FF6B6B;           /* red — HIT/errors */
  --qi-info: #79B8FF;            /* blue — information */
  --qi-warning: var(--qi-warm);  /* amber — warning/attention */
  --qi-success: var(--qi-energy);/* success alias */
  --qi-on-accent: #03110E;       /* readable text/icon on cyan */
  --qi-on-energy: #06140F;       /* readable text/icon on green */
  --qi-on-trust: #1B1202;        /* readable text/icon on gold */
  --qi-on-error: #2A0707;        /* readable text/icon on red */

  /* ── Glass ─────────────────────────────────────────── */
  --qi-glass: rgba(255, 255, 255, 0.08);
  --qi-glass-hover: rgba(255, 255, 255, 0.10);
  --qi-glass-border: rgba(255, 255, 255, 0.18);
  --qi-glass-border-subtle: rgba(255, 255, 255, 0.08);
  --qi-border: rgba(255, 255, 255, 0.12);

  /* ── Surfaces (dvrctl plugin renderer parity) ──────── */
  --qi-surface-2: rgba(255, 255, 255, 0.10);
  --qi-bg-elevated: #0A1410;
  --qi-warm: #E8A94A;

  /* ── Console surface levels (Erik mockup parity) ─────
     Page → card → raised ladder plus a tinted hero surface
     and attention tint, so cards no longer all share one
     identical glass weight. */
  --qi-surface-page: #0c1314;
  --qi-surface-card: #131d1f;
  --qi-surface-raised: #1a2628;
  --qi-surface-hero: #132725;
  --qi-surface-hero-border: #30504e;
  --qi-surface-attention: #3b3021;
  --qi-surface-attention-calm: #1d3532;

  /* ── Glow ──────────────────────────────────────────── */
  --qi-glow: rgba(53, 201, 154, 0.35);

  /* ── Status semantics (mission/event states) ─────────
     One source of truth — JS reads these vars too, so
     tenant themes can restyle states without JS edits. */
  --qi-status-done: #5FB85F;
  --qi-status-active: var(--qi-accent);
  --qi-status-await: #E0B34F;          /* proposed / waiting_approval */
  --qi-status-danger: #E06A5F;         /* failed / blocked */
  --qi-status-pending: var(--qi-text-muted);
  --qi-status-warn: var(--qi-status-await); /* warning accents (was undefined — 20+ usages) */

  /* ── Chart color semantics (WHYBLE-2764) ─────────────
     Fixed functions — every chart uses these, never
     ad-hoc hex. Do not repurpose per widget:
     current/primary series  → --qi-chart-current
     comparison/previous     → --qi-chart-comparison
     scheduled/upcoming      → --qi-chart-scheduled (dashed)
     attention/risk          → --qi-status-await
     failure/negative        → --qi-status-danger
     positive/good           → --qi-status-done */
  --qi-chart-current: var(--qi-accent);
  --qi-chart-comparison: #b85fb8;
  --qi-chart-scheduled: var(--qi-status-await);

  /* ── Channel colors ────────────────────────────────── */
  --qi-ch-whatsapp: #25D366;
  --qi-ch-telegram: #0088CC;
  --qi-ch-email: #D4AF37;
  --qi-ch-wechat: #07C160;
  --qi-ch-alipay: #1677FF;
  --qi-ch-bc: #003580;
  --qi-ch-hw: #FF6900;
  --qi-ch-ai: var(--qi-accent);
  --qi-ch-mission: #D4AF37;
  --qi-ch-demo: #A78BFA;
  --qi-demo: #B78CFF;                  /* demo-mode violet (badges, event kind) */
  --qi-ch-mail: var(--qi-ch-email);
  --qi-ch-sms: #8B7CF6;
  --qi-ch-linkedin: #0A66C2;
  --qi-ch-instagram: #E1306C;

  /* ── Typography ────────────────────────────────────── */
  /* ADR 0014: Use rem/clamp for screen-size responsiveness */
  --qi-font-sans: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif;
  --qi-font-mono: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;

  --qi-font-eyebrow: 600 clamp(0.625rem, 0.6rem + 0.1vw, 0.75rem)/1.4 var(--qi-font-sans);
  --qi-font-eyebrow-sm: 600 clamp(0.5rem, 0.48rem + 0.08vw, 0.625rem)/1.4 var(--qi-font-sans);
  --qi-font-body: 400 clamp(0.875rem, 0.85rem + 0.2vw, 1rem)/1.5 var(--qi-font-sans);
  --qi-font-body-sm: 400 clamp(0.75rem, 0.73rem + 0.15vw, 0.875rem)/1.5 var(--qi-font-sans);
  --qi-font-title: 700 clamp(1.25rem, 1.1rem + 0.8vw, 1.625rem)/1.3 var(--qi-font-sans);
  --qi-font-title-sm: 600 clamp(1rem, 0.95rem + 0.3vw, 1.125rem)/1.3 var(--qi-font-sans);
  --qi-font-caption: 400 clamp(0.65rem, 0.63rem + 0.1vw, 0.75rem)/1.4 var(--qi-font-mono);

  /* ── Console page type scale (venue / clubdesk) ────── */
  --qi-font-meta: 400 clamp(0.625rem, 0.6rem + 0.1vw, 0.75rem)/1.35 var(--qi-font-sans);
  --qi-font-label: 500 clamp(0.625rem, 0.6rem + 0.1vw, 0.8125rem)/1.35 var(--qi-font-sans);
  --qi-font-label-mono: 500 clamp(0.625rem, 0.62rem + 0.05vw, 0.6875rem)/1.3 var(--qi-font-mono);
  --qi-font-micro-mono: 600 clamp(0.5625rem, 0.55rem + 0.05vw, 0.625rem)/1.35 var(--qi-font-mono);
  --qi-font-card-title: 600 clamp(0.875rem, 0.86rem + 0.05vw, 0.9375rem)/1.3 var(--qi-font-sans);
  --qi-font-total: 650 clamp(1.0625rem, 1.03rem + 0.1vw, 1.1875rem)/1.2 var(--qi-font-sans);
  --qi-font-metric: 700 clamp(1.125rem, 1.08rem + 0.15vw, 1.3125rem)/1.2 var(--qi-font-mono);
  --qi-font-metric-sm: 700 clamp(0.9375rem, 0.92rem + 0.1vw, 1.0625rem)/1.2 var(--qi-font-mono);
  --qi-font-metric-sans: 600 clamp(1.25rem, 1.2rem + 0.15vw, 1.5rem)/1.3 var(--qi-font-sans);
  --qi-font-hero: 700 clamp(1.625rem, 1.5rem + 0.5vw, 2.125rem)/1.1 var(--qi-font-mono);

  /* ── Rail anatomy type scale (dashboard widgets) ───── */
  --qi-rail-title: 600 12px/1.2 var(--qi-font-sans);
  --qi-rail-big: 700 1.15rem var(--qi-font-mono);
  --qi-rail-row-main: 500 12px/1.35 var(--qi-font-sans);
  --qi-rail-row-sub: 400 11px/1.3 var(--qi-font-mono);
  --qi-rail-fresh: 400 10px/1.3 var(--qi-font-mono);
  --qi-rail-status: 400 9px/1.35 var(--qi-font-sans);
  --qi-rail-big-card: 700 24px/1.15 var(--qi-font-sans);
  --qi-rail-big-hero: 700 30px/1.1 var(--qi-font-sans);
  --qi-rail-title-card: 600 14px/1.4 var(--qi-font-sans);
  --qi-rail-title-business: 600 13px/1.5 var(--qi-font-sans);
  --qi-rail-status-business: 400 11px/1.5 var(--qi-font-sans);
  --qi-rail-row-sub-card: 400 11px/1.35 var(--qi-font-sans);

  /* ── Spacing (rem-based for screen-size scaling) ──── */
  --qi-space-xs: 0.25rem;
  --qi-space-sm: 0.5rem;
  --qi-space-md: 0.75rem;
  --qi-space-lg: 1rem;
  --qi-space-xl: 1.5rem;
  --qi-space-xxl: 2rem;

  /* ── Radii ─────────────────────────────────────────── */
  --qi-radius-sm: 0.5rem;
  --qi-radius-md: 0.75rem;
  --qi-radius-lg: 1rem;
  --qi-radius-xl: 1.5rem;
  --qi-radius-pill: 999px;

  /* ── Scale factor (settable per tenant/user for zoom) ── */
  --qi-scale: 1;

  /* ── Glass blur ────────────────────────────────────── */
  --qi-blur: 24px;
  --qi-saturate: 1.6;

  /* ── Animation ─────────────────────────────────────── */
  --qi-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --qi-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --qi-dur-fast: 0.15s;
  --qi-dur-normal: 0.3s;
  --qi-dur-slow: 0.6s;

  /* ── Z-index ───────────────────────────────────────── */
  --qi-z-ambient: -1;
  --qi-z-content: 1;
  --qi-z-header: 20;
  --qi-z-overlay: 50;
  --qi-z-modal: 100;

  /* ── Legacy aliases — pages written before the token set
     settled referenced these names; map them to canonical
     tokens so nothing silently falls back. ───────────── */
  --qi-fg: var(--qi-text);
  --qi-text-dim: var(--qi-text-muted);
  --qi-danger: var(--qi-error);
  --qi-accent-dim: rgba(102, 252, 241, 0.12);
  --qi-glass-bg: var(--qi-glass);
  --qi-glass-surface: var(--qi-surface);
  --qi-bg-input: rgba(0, 0, 0, 0.25);
  --qi-shadow-raised: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.35);
  --qi-dur-base: var(--qi-dur-normal);
  --qi-dur-med: var(--qi-dur-normal);
  --qi-text-xs: 0.72rem;
  --qi-text-sm: 0.85rem;
  --qi-text-xl: 1.4rem;

  /* ── Console widget typography (Erik mockup parity) ── */
  --qi-kpi-value: 550 1.75rem/1.1 var(--qi-font-sans);
  --qi-hero-title: 550 1.25rem/1.3 var(--qi-font-sans);
}