/*
 * X1 Platform — Shared Design Tokens
 * Created: 2026-04-07
 *
 * THE source of truth for colors, spacing, typography, and radii across all apps.
 * Import this in every app. Override accent/font in a per-app theme file if needed.
 *
 * Naming convention: --{category}-{variant}
 * Based on validator/investor system (most complete), harmonized with intelligence + animak.
 *
 * Usage:
 *   <link rel="stylesheet" href="/shared/core/design/tokens.css">
 *   Or: @import url('/path/to/tokens.css');
 *   Then: background: var(--bg-base); color: var(--text-primary);
 */

:root {
  /* ===== BACKGROUNDS (dark → light) ===== */
  --bg-app:       #09090B;   /* Page background */
  --bg-card:      #111317;   /* Card / panel surfaces */
  --bg-item:      #1A1D21;   /* Items within cards, table rows */
  --bg-elevated:  #22252B;   /* Elevated surfaces, dropdowns */
  --bg-hover:     #2A2D35;   /* Hover state on interactive elements */

  /* ===== TEXT ===== */
  --text-primary:    #FFFFFF;   /* Headings, primary content */
  --text-secondary:  #E4E4E7;   /* Body text, descriptions */
  --text-helper:     #9CA3AF;   /* Labels, hints, metadata */
  --text-disabled:   #6B7280;   /* Disabled, placeholder */

  /* ===== ACCENT (override in app theme) ===== */
  --accent:          #0168E5;   /* Primary interactive — X1 brand blue */
  --accent-hover:    #0776EE;   /* Hover state */
  --accent-highlight:#0185FF;   /* Active / focus state */
  --accent-backdrop: rgba(1, 104, 229, 0.16); /* Background tint */

  /* ===== SEMANTIC COLORS ===== */
  --color-success:   #6BCB77;
  --color-error:     #FF6B6B;
  --color-warning:   #FFD93D;
  --color-info:      #3b82f6;

  /* ===== BORDERS ===== */
  --border:          #1B1E23;   /* Default border */
  --border-subtle:   #16181D;   /* Subtle separator */
  --border-input:    #262A30;   /* Form input borders */
  --border-light:    #353A42;   /* More visible borders */

  /* ===== SPACING (4px base scale) ===== */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  12px;
  --space-lg:  16px;
  --space-xl:  20px;
  --space-2xl: 24px;
  --space-3xl: 32px;
  --space-4xl: 48px;

  /* ===== BORDER RADIUS ===== */
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   8px;
  --radius-xl:   12px;
  --radius-2xl:  16px;
  --radius-full: 9999px;

  /* ===== TYPOGRAPHY ===== */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'SF Mono', monospace;

  /* ===== TRANSITIONS ===== */
  --transition-fast:   150ms ease-in-out;
  --transition-medium: 250ms ease-in-out;
  --transition-slow:   350ms ease-in-out;
}