/* 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-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 */

  /* ── 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;

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

  /* ── 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: #66FCF1;
  --qi-ch-mission: #D4AF37;

  /* ── 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);

  /* ── 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;
}