/* FEXLINK Brand OS - colors_and_type.css */
:root {
  /* Brand Colors */
  --color-platform-blue: #002FA7;
  --color-data-cyan: #00E5FF;
  --color-energy-yellow: #FFFF00;
  --color-risk-red: #FF0000;
  --color-ai-purple: #8600FF;
  --color-dark-energy: #06152E;

  /* Extended Colors - Digital Energy */
  --color-data-teal: #00BFA5;
  --color-data-green: #00E676;
  --color-energy-gold: #FFB800;
  --color-energy-orange: #FF6D00;
  --color-critical-purple: #8600FF;
  --color-deep-space: #030B1A;
  --color-data-ocean: #0A1E3F;
  --color-grid-blue: #1A3A6B;

  /* Color Tints - Platform Blue */
  --color-platform-blue-50: #E5EBFA;
  --color-platform-blue-100: #CCD8F5;
  --color-platform-blue-200: #99B1EB;
  --color-platform-blue-300: #668AE0;
  --color-platform-blue-400: #3363D6;
  --color-platform-blue-500: #002FA7;
  --color-platform-blue-600: #00268A;
  --color-platform-blue-700: #001C6E;
  --color-platform-blue-800: #001352;
  --color-platform-blue-900: #000A35;

  /* Dark Theme Colors */
  --color-dark-bg: #06152E;
  --color-dark-surface: #0A2147;
  --color-dark-surface-2: #0E2D5C;
  --color-dark-border: rgba(255,255,255,0.08);

  /* Grays */
  --color-gray-050: #F7F8FA;
  --color-gray-100: #E5E5E5;
  --color-gray-200: #B2B2B2;
  --color-gray-300: #7F7F7F;
  --color-gray-400: #333333;
  --color-gray-900: #111111;

  /* Typography */
  --font-zh: "Microsoft YaHei", "Source Han Sans", "Noto Sans SC", sans-serif;
  --font-en: "Inter", "Segoe UI", "Arial", sans-serif;
  --font-num: "DIN", "Inter", "Roboto Mono", monospace;
  --font-base: "Microsoft YaHei", "Source Han Sans", "Noto Sans SC", sans-serif, "Inter", "Segoe UI", "Arial", sans-serif;

  /* Font Sizes */
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-base: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  --font-size-3xl: 30px;
  --font-size-4xl: 36px;
  --font-size-5xl: 48px;
  --font-size-6xl: 60px;

  /* Font Weights */
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* Line Heights */
  --line-height-tight: 1.15;
  --line-height-snug: 1.3;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.7;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-1: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-2: 0 2px 4px rgba(0,0,0,0.06);
  --shadow-3: 0 4px 8px rgba(0,0,0,0.08);
  --shadow-4: 0 8px 16px rgba(0,0,0,0.10);
  --shadow-5: 0 16px 32px rgba(0,0,0,0.12);

  /* Semantic Colors */
  --color-primary: #002FA7;
  --color-primary-foreground: #FFFFFF;
  --color-accent: #00E5FF;
  --color-highlight: #FFFF00;
  --color-destructive: #FF0000;
  --color-background: #FFFFFF;
  --color-foreground: #111111;
  --color-muted: #F7F8FA;
  --color-muted-foreground: #7F7F7F;
  --color-border: #E5E5E5;
  --color-card: #FFFFFF;
  --color-surface: #F7F8FA;
}

.dark {
  --color-background: #06152E;
  --color-foreground: #FFFFFF;
  --color-card: #0A2147;
  --color-surface: #0E2D5C;
  --color-border: rgba(255,255,255,0.08);
  --color-muted: rgba(255,255,255,0.04);
  --color-muted-foreground: rgba(255,255,255,0.5);
}