/* =============================================================================
   OLT Design System - Global Styles
   =============================================================================
   
   This file defines the complete color system and global styles for the OLT
   application. All colors should be referenced through CSS variables defined here.
   
   COLOR SYSTEM OVERVIEW
   ---------------------
   The color system is organized into three layers:
   
   1. BASE TOKENS - Raw color values from the OLT brand palette
      - Primary (brand blue): UI accents, buttons, links
      - Secondary (brand red): Alerts, critical actions
      - Neutral: Backgrounds, borders, text
      - Semantic: Success, warning, error, info states
      - Data: 12 distinct colors for data visualization
   
   2. SEMANTIC TOKENS - Purpose-based aliases that reference base tokens
      - --color-bg, --color-surface: Background colors
      - --color-text, --color-text-muted: Text colors
      - --color-border-*: Border colors
      - --color-accent: Primary action color
      - --color-danger, --color-success, --color-warning: State colors
   
   3. COMPONENT TOKENS - Specific use-case tokens
      - Map stress indicators
      - Trend parameter colors (PV/EV/HP)
      - Gradients for data visualization
   
   USAGE GUIDELINES
   ----------------
   - Always use semantic tokens in component CSS when possible
   - Use base tokens only when semantic tokens don't fit the use case
   - For new colors, add to base tokens first, then create semantic aliases
   
   =========================================================================== */

:root {
  /* =========================================================================
       BASE TOKENS - OLT Brand Palette
       ========================================================================= */

  /* ---------------------------------------------------------------------------
       Primary - Brand Blue
       Used for: UI accents, buttons, links, focus states
       --------------------------------------------------------------------------- */
  --color-primary-main: #236192;
  --color-primary-50: #f3f7fc;
  --color-primary-100: #e5eff9;
  --color-primary-200: #c6def1;
  --color-primary-300: #94c4e5;
  --color-primary-400: #5ba5d5;
  --color-primary-500: #368ac1;
  --color-primary-600: #266ea3;
  --color-primary-800: #1e4b6e;
  --color-primary-900: #1e405c;

  /* ---------------------------------------------------------------------------
       Secondary - Brand Red
       Used for: Critical actions, destructive operations, brand accents
       --------------------------------------------------------------------------- */
  --color-secondary-main: #d0103a;
  --color-secondary-50: #fff1f2;
  --color-secondary-100: #ffe4e5;
  --color-secondary-200: #ffccd1;
  --color-secondary-300: #ffa2ac;
  --color-secondary-400: #fe6e7f;
  --color-secondary-500: #f73c57;
  --color-secondary-600: #e51941;
  --color-secondary-800: #a20f34;
  --color-secondary-900: #8a1133;

  /* ---------------------------------------------------------------------------
       Neutral - Grayscale
       Used for: Backgrounds, borders, text, disabled states
       --------------------------------------------------------------------------- */
  --color-neutral-10: #f4f5f7;
  --color-neutral-50: #edeff2;
  --color-neutral-100: #e4e8e9;
  --color-neutral-200: #ccd2d5;
  --color-neutral-300: #a8b2b8;
  --color-neutral-400: #7c8c94;
  --color-neutral-500: #617079;
  --color-neutral-600: #515c64;
  --color-neutral-700: #485056;
  --color-neutral-800: #3f454b;
  --color-neutral-900: #383d41;
  --color-neutral-950: #232629;

  /* ---------------------------------------------------------------------------
       Background Colors
       --------------------------------------------------------------------------- */
  --color-background-grey: #f9fafa;
  --color-background-white: #ffffff;

  /* ---------------------------------------------------------------------------
       Success - Green
       Used for: Success states, positive indicators, confirmations
       --------------------------------------------------------------------------- */
  --color-success-50: #f1fcf3;
  --color-success-100: #e0f8e5;
  --color-success-200: #c1f0cb;
  --color-success-300: #92e3a4;
  --color-success-400: #5bcd75;
  --color-success-500: #34b352;
  --color-success-600: #26933f;
  --color-success-700: #217435;
  --color-success-800: #1f5c2e;
  --color-success-900: #1b4c27;

  /* ---------------------------------------------------------------------------
       Warning - Amber/Yellow
       Used for: Warning states, caution indicators, PV trends
       --------------------------------------------------------------------------- */
  --color-warning-50: #fefcec;
  --color-warning-100: #fcf4c9;
  --color-warning-200: #f8e37c;
  --color-warning-300: #f6d553;
  --color-warning-400: #f3c22c;
  --color-warning-500: #eda313;
  --color-warning-600: #d27c0d;
  --color-warning-700: #ae590f;
  --color-warning-800: #743913;
  --color-warning-900: #431d05;

  /* ---------------------------------------------------------------------------
       Error - Red
       Used for: Error states, destructive actions, HP trends
       --------------------------------------------------------------------------- */
  --color-error-50: #fdf3f3;
  --color-error-100: #fbe5e5;
  --color-error-200: #f9cfcf;
  --color-error-300: #f4adad;
  --color-error-400: #eb7e7e;
  --color-error-500: #de5555;
  --color-error-600: #ca3838;
  --color-error-700: #a52a2a;
  --color-error-800: #8d2727;
  --color-error-900: #5d1e1e;

  /* ---------------------------------------------------------------------------
       Info - Indigo/Blue (used for blue colormaps and EV trends)
       Used for: Informational states, EV trend gradients, blue data visualization
       --------------------------------------------------------------------------- */
  --color-info-50: #eef2ff;
  --color-info-100: #dfe7ff;
  --color-info-200: #ccd6ff;
  --color-info-300: #a3b3fe;
  --color-info-400: #7f8afa;
  --color-info-500: #6063f4;
  --color-info-600: #4d43e8;
  --color-info-700: #4235cd;
  --color-info-800: #352ea5;
  --color-info-900: #302c83;

  /* ---------------------------------------------------------------------------
       Data Visualization Colors
       Used for: Charts, graphs, categorical data representation
       --------------------------------------------------------------------------- */
  --color-data-light-blue: #b3c1fe;
  --color-data-blue: #416bd7;
  --color-data-yellow: #edcf7b;
  --color-data-magenta: #c94077;
  --color-data-light-teal: #95dede;
  --color-data-red: #a53c43;
  --color-data-orange: #f9b286;
  --color-data-teal: #2f7474;
  --color-data-light-purple: #d0b7f6;
  --color-data-dark-blue: #1f48ac;
  --color-data-green: #94c79e;
  --color-data-purple: #794cb8;

  /* =========================================================================
       SPACING TOKENS
       ========================================================================= */
  --space-0: 0px;
  --space-25: 2px;
  --space-50: 4px;
  --space-75: 6px;
  --space-100: 8px;
  --space-150: 12px;
  --space-200: 16px;
  --space-250: 20px;
  --space-300: 24px;
  --space-400: 32px;
  --space-500: 40px;
  --space-600: 48px;
  --space-700: 56px;
  --space-800: 64px;

  /* =========================================================================
       SEMANTIC TOKENS
       These reference base tokens and provide purpose-based naming
       ========================================================================= */

  /* ---------------------------------------------------------------------------
       Background & Surface
       --------------------------------------------------------------------------- */
  --color-bg: var(--color-background-white);
  --color-bg-subtle: var(--color-neutral-10);
  --color-surface: var(--color-background-white);
  --color-surface-alt: var(--color-neutral-100);

  /* ---------------------------------------------------------------------------
       Text Colors
       --------------------------------------------------------------------------- */
  --color-text: var(--color-neutral-950);
  --color-text-muted: var(--color-neutral-500);
  --color-text-subtle: var(--color-neutral-400);
  --color-text-on-accent: var(--color-background-white);

  /* ---------------------------------------------------------------------------
       Border Colors
       --------------------------------------------------------------------------- */
  --color-border-subtle: var(--color-neutral-200);
  --color-border-soft: var(--color-neutral-100);
  --color-border-strong: var(--color-neutral-300);

  /* ---------------------------------------------------------------------------
       Accent / Primary Actions
       --------------------------------------------------------------------------- */
  --color-accent: var(--color-primary-main);
  --color-accent-hover: var(--color-primary-800);
  --color-accent-soft: rgba(35, 97, 146, 0.1);
  --color-accent-soft-bg: var(--color-primary-50);

  /* ---------------------------------------------------------------------------
       State Colors
       --------------------------------------------------------------------------- */
  --color-danger: var(--color-error-500);
  --color-danger-strong: var(--color-error-700);
  --color-danger-soft: rgba(222, 85, 85, 0.2);

  --color-warning: var(--color-warning-500);
  --color-warning-strong: var(--color-warning-800);
  --color-warning-soft: rgba(237, 163, 19, 0.2);

  --color-success: var(--color-success-500);
  --color-success-strong: var(--color-success-700);
  --color-success-soft: rgba(52, 179, 82, 0.2);

  /* ---------------------------------------------------------------------------
       Shadows & Overlays
       --------------------------------------------------------------------------- */
  --color-overlay: rgba(0, 0, 0, 0.5);
  --color-shadow-soft: rgba(0, 0, 0, 0.1);
  --color-shadow-medium: rgba(0, 0, 0, 0.15);
  --color-shadow-strong: rgba(0, 0, 0, 0.25);
  --color-shadow-accent: rgba(35, 97, 146, 0.4);

  /* =========================================================================
       TYPOGRAPHY TOKENS
       ========================================================================= */
  --font-geist-sans:
    "Geist Variable", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-geist-mono:
    "Geist Mono Variable", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas,
    monospace;

  color-scheme: dark;
}

/* =============================================================================
     GLOBAL RESETS & BASE STYLES
     =========================================================================== */

* {
  box-sizing: border-box;
}

html,
body,
#root {
  height: 100%;
}

html {
  font-family: var(--font-geist-sans);
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: inherit;
  margin: 0;
  padding: 0;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Disable text selection globally for app-like UX */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Re-enable text selection for form inputs */
input,
textarea,
select,
[contenteditable="true"] {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}