/**
 * FUCIT Design Tokens
 *
 * ALL theme customization happens by overriding these variables.
 * DO NOT hardcode colors/spacing anywhere else.
 *
 * User themes will override these in a <style> tag.
 */

:root {
  /* ============================================
     COLOR SYSTEM - MATRIX DARK MODE
     ============================================ */

  /* Primary Colors - Matrix Green */
  --color-primary: #00ff00;           /* Matrix green - main brand */
  --color-primary-dark: #00cc00;      /* Darker green - hover states */
  --color-primary-light: #00ff44;     /* Lighter green - accents */
  --color-primary-dim: #003300;       /* Very dark green - subtle backgrounds */
  --color-primary-alpha: rgba(0, 255, 0, 0.1);  /* Transparent green */

  /* Status Colors - All based on green theme */
  --color-warning: #ffaa00;           /* Orange - warnings */
  --color-danger: #ff0000;            /* Pure red - errors */
  --color-info: #00ff00;              /* Green - info (same as primary) */
  --color-success: #00ff00;           /* Green - success (same as primary) */

  /* Background Colors (darkest to lightest) */
  --color-bg-primary: #0a0a0a;        /* Body background - almost black */
  --color-bg-secondary: #0f0f0f;      /* Slightly lighter */
  --color-bg-surface: #111111;        /* Cards, sections, containers */
  --color-bg-surface-light: #1a1a1a; /* Lighter surface - for subtle borders */
  --color-bg-elevated: #1a1a1a;       /* Elevated elements, modals */

  /* Text Colors (grays from dark to light) */
  --color-text-primary: #ffffff;      /* Pure white - important text */
  --color-text-secondary: #888888;    /* Medium gray - body text */
  --color-text-tertiary: #666666;     /* Darker gray - less important */
  --color-text-disabled: #444444;     /* Very dark gray - disabled */
  --color-text-muted: #555555;        /* Muted text */
  --color-text-accent: #00ff00;       /* Highlighted text */

  /* Border Colors */
  --color-border: #333333;            /* Default borders */
  --color-border-light: #444444;      /* Lighter borders */
  --color-border-dark: #222222;       /* Darker borders */
  --color-border-accent: #00ff00;     /* Decorative/accent borders - customizable */
  --color-border-focus: #00ff00;      /* Focus states - use primary */

  /* Link Colors */
  --color-link: #00ff00;              /* Default links */
  --color-link-hover: #00ff00;        /* Hover state - same as link */
  --color-link-visited: #00ff00;      /* Visited links - same as link */

  /* ============================================
     SPACING SCALE (4px base)
     ============================================ */

  --space-xs: 0.25rem;    /* 4px */
  --space-sm: 0.5rem;     /* 8px */
  --space-md: 1rem;       /* 16px */
  --space-lg: 1.5rem;     /* 24px */
  --space-xl: 2rem;       /* 32px */
  --space-xxl: 3rem;      /* 48px */
  --space-xxxl: 4rem;     /* 64px */

  /* ============================================
     TYPOGRAPHY - System Monospace + Great CSS
     ============================================ */

  /* Font Families - NO EXTERNAL FONTS! */
  --font-mono: monospace;             /* System mono: Consolas/Monaco/DejaVu */
  --font-sans: monospace;             /* We use mono for everything */
  --font-display: monospace;          /* Headings also use monospace */

  /* Font Sizes - Modular scale */
  --font-size-xs: 0.75rem;      /* 12px */
  --font-size-sm: 0.875rem;     /* 14px */
  --font-size-base: 1rem;       /* 16px */
  --font-size-lg: 1.125rem;     /* 18px */
  --font-size-xl: 1.5rem;       /* 24px */
  --font-size-xxl: 2rem;        /* 32px */
  --font-size-xxxl: 3rem;       /* 48px */

  /* Font Weights */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  /* Line Heights - THE SECRET SAUCE! */
  --line-height-base: 1.6;      /* Default line-height for body */
  --line-height-tight: 1.2;
  --line-height-normal: 1.6;
  --line-height-relaxed: 1.8;   /* This is key for legibility! */
  --line-height-loose: 2;

  /* Letter Spacing - ALSO CRITICAL! */
  --letter-spacing-tight: -0.5px;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 2px;   /* For uppercase headings */
  --letter-spacing-wider: 3px;

  /* ============================================
     LAYOUT
     ============================================ */

  /* Container Widths */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
  --container-max: 1280px;  /* Alias for xl */

  /* ============================================
     Z-INDEX SCALE
     ============================================ */

  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;

  /* ============================================
     BORDERS & SHADOWS
     ============================================ */

  /* Border Radius - Sharp corners for tech aesthetic */
  --radius-none: 0;
  --radius-sm: 0;
  --radius-md: 0;
  --radius-lg: 0;
  --radius-full: 9999px;    /* For circular elements only */

  /* Box Shadows - Subtle neon glows */
  --shadow-sm: 0 0 10px rgba(0, 255, 0, 0.1);
  --shadow-md: 0 0 20px rgba(0, 255, 0, 0.2);
  --shadow-lg: 0 0 30px rgba(0, 255, 0, 0.3);
  --shadow-glow: 0 0 10px currentColor;

  /* Text Shadows - For glowing effects */
  --text-shadow-glow: 0 0 10px currentColor;
  --text-shadow-strong: 0 0 20px currentColor;

  /* ============================================
     TRANSITIONS & ANIMATIONS
     ============================================ */

  --transition-fast: 0.15s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.5s ease;

  /* ============================================
     OPACITY
     ============================================ */

  --opacity-disabled: 0.5;
  --opacity-hover: 0.8;

  /* ============================================
     COMPONENT-SPECIFIC VARIABLES
     ============================================ */

  /* Buttons */
  --button-padding-sm: 0.5rem 1rem;
  --button-padding-md: 0.75rem 1.5rem;
  --button-padding-lg: 1rem 2rem;

  /* Forms */
  --input-padding: 0.75rem 1rem;
  --input-border: 1px solid var(--color-border);
  --input-border-focus: 1px solid var(--color-primary);
  --input-bg: var(--color-bg-primary);
  --input-bg-focus: var(--color-bg-secondary);

  /* Cards */
  --card-padding: 1.5rem;
  --card-border: 1px solid var(--color-border);
  --card-bg: var(--color-bg-surface);

  /* Navigation */
  --nav-height: 60px;
  --nav-bg: var(--color-bg-secondary);

  /* Chat */
  --chat-header-height: 60px;
  --chat-input-height: 60px;
  --chat-sidebar-width: 250px;

  /* ============================================
     RETRO EFFECTS (Optional)
     ============================================ */

  --scanline-opacity: 0.03;
  --crt-curve: 0;              /* 0 = off, can be customized */
  --terminal-glow: 0 0 10px rgba(0, 255, 0, 0.5);
}

/* ============================================
   THEME VARIATIONS
   ============================================ */

/* Matrix Dark is the default (defined above in :root) */

/* Neon Dark Theme - Alternative green */
.theme-neon {
  --color-primary: #00ff88;
  --color-primary-dark: #00cc66;
  --color-primary-light: #00ffaa;
  --color-link-hover: #00ffaa;
  --color-link-visited: #00cc66;
}

/* Light Mode Theme (for users who want it) */
.theme-light {
  --color-bg-primary: #f5f5f5;
  --color-bg-secondary: #eeeeee;
  --color-bg-surface: #ffffff;
  --color-bg-elevated: #fafafa;
  --color-border: #cccccc;
  --color-border-light: #dddddd;
  --color-border-dark: #999999;
  --color-text-primary: #1a1a1a;
  --color-text-secondary: #666666;
  --color-text-tertiary: #888888;
  --color-text-disabled: #bbbbbb;
  --color-text-muted: #999999;
}

/* ============================================
   ACCESSIBILITY - HIGH CONTRAST
   ============================================ */
@media (prefers-contrast: high) {
  :root {
    --color-border: #ffffff;
    --color-text-muted: #ffffff;
  }
}

/* ============================================
   REDUCED MOTION
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0ms;
    --transition-base: 0ms;
    --transition-slow: 0ms;
  }
}