/**
 * Yao Engine - Design Tokens
 *
 * Color system derived from CUI Neo design system.
 * Default: light theme. Dark theme via [data-theme="dark"].
 *
 * ════════════════════════════════════════════════════════════════
 *  COLOR USAGE SPECIFICATION
 * ════════════════════════════════════════════════════════════════
 *
 *  1. TEXT COLORS — when to use each level
 *  ────────────────────────────────────────
 *  --color-text             Headings (h1–h6), body copy, nav links,
 *                           product names, card titles, form labels.
 *                           The DEFAULT text color. Use unless you
 *                           have a reason to go lighter.
 *
 *  --color-text-secondary   Descriptions, subtitles, sub-labels,
 *                           meta info (dates, authors), dropdown
 *                           descriptions, helper text under inputs,
 *                           footer secondary copy.
 *
 *  --color-text-muted       Captions, placeholders, disabled text,
 *                           copyright lines, "powered by" badges,
 *                           watermarks. NEVER use for text users
 *                           need to read — only decorative / low
 *                           priority information.
 *
 *  --color-text-inverse     Text on dark / primary backgrounds
 *                           (e.g. white text on blue CTA button).
 *
 *  2. BACKGROUND COLORS — surface hierarchy
 *  ────────────────────────────────────────
 *  --color-bg-page          Full-page background (html/body).
 *
 *  --color-bg-card          Cards, modals, dropdown menus, popovers.
 *                           One step elevated from page background.
 *
 *  --color-bg-hover         Interactive hover states: table rows,
 *                           list items, nav links, icon buttons.
 *                           Subtle highlight on pointer-over.
 *
 *  --color-glass-bg         Header bar, floating toolbars, sticky
 *  --color-glass-border     panels. Use with backdrop-filter: blur.
 *
 *  3. BORDER COLORS — dividers & edges
 *  ────────────────────────────────────────
 *  --color-border           Card edges, input borders, table cell
 *                           dividers, section separators.
 *
 *  --color-border-light     Subtle inner dividers (e.g. between
 *                           dropdown items), decorative rules.
 *
 *  4. PRIMARY COLOR — interactive elements
 *  ────────────────────────────────────────
 *  --color-primary          CTA buttons (bg), links (text color),
 *                           focus rings, active nav indicators,
 *                           toggle-on states, progress bars.
 *
 *  --color-primary-hover    Hover state for primary buttons / links.
 *
 *  --color-primary-active   Active / pressed state.
 *
 *  5. ACCENT COLORS — decorative, non-interactive
 *  ────────────────────────────────────────
 *  --color-accent-cyan      Tech features, code highlights, hero
 *  --color-accent-purple    AI / premium badges, gradient text
 *  --color-accent-pink      Creative / community sections
 *  --color-accent-green     Success indicators, growth metrics
 *  --color-accent-orange    Warnings, attention callouts
 *
 *  Use for gradient text, section tints, decorative glow, hero
 *  headlines, feature icons. NOT for buttons or interactive states.
 *
 *  6. STATUS COLORS — feedback & validation
 *  ────────────────────────────────────────
 *  --color-success          Form success, positive feedback, check
 *  --color-warning          Caution alerts, pending states
 *  --color-danger           Errors, destructive actions, validation
 *  --color-info             Informational banners, tooltips
 *
 *  7. GLOW COLORS — ambient effects
 *  ────────────────────────────────────────
 *  --color-glow-*           box-shadow on hero sections, button
 *                           auras, card hover elevation. Pure
 *                           decoration — no semantic meaning.
 *
 * ════════════════════════════════════════════════════════════════
 */

/* ========================
 * Light Theme (default)
 * Derived from CUI Neo light theme
 * ======================== */
:root {
  /* Primary - Brand Blue (CUI --color_primary light) */
  --color-primary: #3371fc;
  --color-primary-hover: #4580ff;
  --color-primary-active: #2861e6;
  --color-primary-glow: rgba(51, 113, 252, 0.3);

  /* Accent - Decorative & Highlight */
  --color-accent-cyan: #0ea5e9;
  --color-accent-purple: #8b5cf6;
  --color-accent-pink: #ec4899;
  --color-accent-green: #10b981;
  --color-accent-orange: #f59e0b;

  /* Glow - Ambient decoration (box-shadow, radial-gradient only) */
  --color-glow-cyan: rgba(14, 165, 233, 0.3);
  --color-glow-purple: rgba(139, 92, 246, 0.3);
  --color-glow-pink: rgba(236, 72, 153, 0.25);

  /* Background (CUI Neo light) */
  --color-bg-start: #f8f9fa;
  --color-bg-end: #f0f0f0;
  --color-bg-page: #ffffff;
  --color-bg-section-alt: #f6f7f8;
  --color-bg-card: rgba(255, 255, 255, 0.9);
  --color-bg-card-solid: #ffffff;
  --color-bg-hover: rgba(0, 0, 0, 0.04);
  --color-bg-card-tint: linear-gradient(135deg, rgba(14, 165, 233, 0.015) 0%, rgba(139, 92, 246, 0.015) 100%);

  /* Glass - Frosted overlays (use with backdrop-filter: blur) */
  --color-glass-bg: rgba(255, 255, 255, 0.8);
  --color-glass-border: rgba(0, 0, 0, 0.08);
  --color-glass-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);

  /* Text (CUI Neo light) */
  --color-text: #212529;
  --color-text-secondary: #6c757d;
  --color-text-muted: #adb5bd;
  --color-text-inverse: #f0f0f5;

  /* Border (CUI Neo light) */
  --color-border: rgba(0, 0, 0, 0.1);
  --color-border-light: rgba(0, 0, 0, 0.05);

  /* Status - Feedback */
  --color-success: #00c853;
  --color-warning: #faad14;
  --color-danger: #e62965;
  --color-info: #3371fc;

  /* Shadows — tinted with brand hue for softer feel on white */
  --shadow-sm: 0 1px 3px 0 rgba(100, 116, 139, 0.08), 0 1px 2px -1px rgba(100, 116, 139, 0.06);
  --shadow-md: 0 4px 6px -1px rgba(100, 116, 139, 0.08), 0 2px 4px -2px rgba(100, 116, 139, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(100, 116, 139, 0.08), 0 4px 6px -4px rgba(100, 116, 139, 0.06);
  --shadow-xl: 0 20px 25px -5px rgba(100, 116, 139, 0.08), 0 8px 10px -6px rgba(100, 116, 139, 0.06);
  --shadow-glow: 0 0 40px var(--color-glow-cyan);

  /* ========================
   * Non-color tokens (shared across themes)
   * ======================== */

  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;
  --spacing-3xl: 64px;
  --spacing-4xl: 80px;
  --spacing-5xl: 120px;

  /* Typography */
  --font-family:
    "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-family-display: "Outfit", "SF Pro Display", -apple-system, sans-serif;
  --font-family-mono: "SF Mono", "Monaco", "Inconsolata", monospace;

  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 2rem;
  --font-size-4xl: 2.5rem;
  --font-size-5xl: 3.5rem;
  --font-size-6xl: 4.5rem;

  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --line-height-tight: 1.1;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;

  /* Layout */
  --max-width: 1200px;
  --max-width-narrow: 800px;
  --max-width-wide: 1400px;
  --topbar-height: 32px;
  --header-height: 48px;

  /* Border Radius */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Z-Index */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-modal: 300;
  --z-tooltip: 400;
}

/* ========================
 * Dark Theme Override
 * Derived from CUI Neo dark theme
 * ======================== */
[data-theme="dark"] {
  --color-primary: #4580ff;
  --color-primary-hover: #5590ff;
  --color-primary-active: #3470ef;
  --color-primary-glow: rgba(69, 128, 255, 0.4);

  --color-accent-cyan: #00d4ff;
  --color-accent-purple: #a855f7;

  --color-glow-cyan: rgba(0, 212, 255, 0.5);
  --color-glow-purple: rgba(168, 85, 247, 0.5);
  --color-glow-pink: rgba(236, 72, 153, 0.4);

  --color-bg-start: #1a1b2e;
  --color-bg-end: #0d1117;
  --color-bg-page: #1a1b1e;
  --color-bg-section-alt: #1e1f23;
  --color-bg-card: rgba(37, 38, 43, 0.6);
  --color-bg-card-solid: #25262b;
  --color-bg-hover: rgba(55, 58, 64, 0.8);
  --color-bg-card-tint: linear-gradient(135deg, rgba(0, 212, 255, 0.03) 0%, rgba(168, 85, 247, 0.03) 100%);

  --color-glass-bg: rgba(13, 17, 23, 0.6);
  --color-glass-border: rgba(255, 255, 255, 0.08);
  --color-glass-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);

  --color-text: #e9ecef;
  --color-text-secondary: #adb5bd;
  --color-text-muted: #6c757d;
  --color-text-inverse: #1a1b1e;

  --color-border: rgba(255, 255, 255, 0.1);
  --color-border-light: rgba(255, 255, 255, 0.05);

  --color-info: #4580ff;

  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px -1px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.35), 0 2px 4px -2px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.35), 0 4px 6px -4px rgba(0, 0, 0, 0.35);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.35), 0 8px 10px -6px rgba(0, 0, 0, 0.35);
}