/* ==========================================================================
   OSMANTHUS PLATFORM - CONSOLIDATED CSS VARIABLES
   ==========================================================================
   
   This is the single source of truth for all CSS variables across the platform.
   All applications should import this file and reference these variables.
   
   Last updated: 2025-01-06
   Converted to Mindstate Design Labs aesthetic
   ========================================================================== */

   :root {
      /* ==========================================================================
         BASE COLORS - MINDSTATE DESIGN LABS
         ========================================================================== */
      
      /* Background Colors */
      /* Mindstate: Pure white and light gray backgrounds */
      --color-bg: #FFFFFF;              /* Mindstate: Pure white (was #EBECF0) */
      --color-bg-light: #FAFAFA;        /* Mindstate: Very light gray (was #F0F1F5) */
      --color-bg-dark: #F4F4F4;         /* Mindstate: Light gray (was #E1E2E7) */
      --color-bg-darker: #EBEBEB;       /* Mindstate: Slightly darker gray (new) */
      --color-white: #FFFFFF;
      --color-off-white: #FAFAFA;       /* Mindstate: Aligned with bg-light */
      
      /* Shadow Colors */
      /* Mindstate: Simplified shadow system - no dual shadows */
      --color-shadow-light: rgba(255, 255, 255, 0.8); /* Kept for compatibility */
      --color-shadow-dark: rgba(174, 178, 196, 0.5);  /* Kept for compatibility */
      
      /* Mindstate Shadow Variables */
      --ms-shadow-light: 0 1px 3px rgba(0, 0, 0, 0.05);
      --ms-shadow-medium: 0 2px 6px rgba(0, 0, 0, 0.08);
      --ms-shadow-heavy: 0 4px 12px rgba(0, 0, 0, 0.1);
      
      /* Text Colors */
      /* Mindstate: High contrast text colors */
      --color-text: #000000;            /* Mindstate: Pure black (was #61677C) */
      --color-text-dark: #000000;       /* Mindstate: Pure black (was #4A4F60) */
      --color-text-light: #3B3B3B;      /* Mindstate: Dark gray (was #91959E) */
      --color-text-lighter: #8B9187;    /* Mindstate: Medium gray (new) */
      
      /* Mindstate Gray Scale */
      --ms-light-grey: #F4F4F4;
      --ms-medium-grey: #8B9187;
      --ms-dark-gray: #3B3B3B;
      --ms-light-gray-subtext: #A7A7A7;
      
      /* ==========================================================================
         ACCENT COLORS - MINDSTATE DATA VISUALIZATION PALETTE
         ========================================================================== */
      
      /* Primary Accent - Data Green (replacing Teal) */
      --color-teal: #6B8E23;            /* Mindstate: Data green (was #1ca095) */
      --color-teal-dark: #4A6319;       /* Mindstate: Darker green */
      --color-teal-light: #8FB339;      /* Mindstate: Lighter green */
      --color-teal-lighter: #F0F8F0;    /* Mindstate: Very light green tint */
      --color-teal-shadow: rgba(107, 142, 35, 0.15);
      
      /* Secondary Accent - Data Orange (replacing Red) */
      --color-red: #CD853F;             /* Mindstate: Data orange (was #aa374c) */
      --color-red-dark: #A0662F;        /* Mindstate: Darker orange */
      --color-red-light: #DBA865;       /* Mindstate: Lighter orange */
      --color-red-lighter: #FFF5F0;     /* Mindstate: Very light orange tint */
      --color-red-shadow: rgba(205, 133, 63, 0.15);
      
      /* Additional Accent Colors - Mindstate Data Palette */
      --color-yellow: #BDB76B;          /* Mindstate: Data yellow (was #f59e0b) */
      --color-yellow-light: #D4CE8A;
      --color-yellow-lighter: #FFFEF0; /* Mindstate: Very light yellow tint */
      --color-yellow-dark: #9A955A;
      
      --color-green: #6B8E23;           /* Mindstate: Using data green */
      --color-green-light: #8FB339;
      --color-green-lighter: #F0F8F0;
      --color-green-dark: #4A6319;
      
      --color-blue: #4682B4;            /* Mindstate: Data blue (was #5b9bd5) */
      --color-blue-light: #6BA3D0;
      --color-blue-lighter: #F0F5FF;   /* Mindstate: Very light blue tint */
      --color-blue-dark: #36638A;
      
      --color-purple: #8B7D6B;          /* Mindstate: Data purple (was #9d4edd) */
      --color-purple-light: #A89A89;
      --color-purple-lighter: #F5F0FF; /* Mindstate: Very light purple tint */
      --color-purple-dark: #6B6155;
      
      /* Mindstate Accent Colors */
      --ms-beige: #EAE8E6;
      --ms-dark-beige: #D7D3C4;
      
      /* Mindstate Data Visualization Colors */
      --ms-data-green: #6B8E23;
      --ms-data-orange: #CD853F;
      --ms-data-blue: #4682B4;
      --ms-data-purple: #8B7D6B;
      --ms-data-yellow: #BDB76B;
      
      /* ==========================================================================
         SEMANTIC VARIABLES
         ========================================================================== */
      
      /* Primary Theme - Now Data Green */
      --primary: var(--ms-data-green);
      --primary-dark: #4A6319;
      --primary-light: #8FB339;
      --primary-lighter: #F0F8F0;
      --primary-shadow: rgba(107, 142, 35, 0.15);
      
      /* Secondary Theme - Now Data Orange */
      --secondary: var(--ms-data-orange);
      --secondary-dark: #A0662F;
      --secondary-light: #DBA865;
      --secondary-lighter: #FFF5F0;
      --secondary-shadow: rgba(205, 133, 63, 0.15);
      
      /* Alternative Secondary (Purple) - Updated to Mindstate */
      --secondary-purple: var(--ms-data-purple);
      --secondary-purple-light: #A89A89;
      --secondary-purple-lighter: #F5F0FF;
      --secondary-purple-dark: #6B6155;
      --secondary-purple-shadow: rgba(139, 125, 107, 0.15);
      
      /* Text Semantic Variables */
      --text-dark: #000000;             /* Mindstate: Pure black */
      --text-medium: #3B3B3B;           /* Mindstate: Dark gray */
      --text-light: #8B9187;            /* Mindstate: Medium gray */
      
      /* Background Semantic Variables */
      --background: #FFFFFF;            /* Mindstate: Pure white */
      --background-light: #FAFAFA;      /* Mindstate: Very light gray */
      --background-dark: #F4F4F4;       /* Mindstate: Light gray */
      --card-bg: #FFFFFF;
      --card-bg-hover: #FAFAFA;
      
      /* Status Colors - Updated to Mindstate palette */
      --error: var(--ms-data-orange);
      --warning: var(--ms-data-yellow);
      --success: var(--ms-data-green);
      --info: var(--ms-data-blue);
      
      /* UI Elements */
      --border: #F4F4F4;                /* Mindstate: Light border */
      --color-divider: #EBEBEB;         /* Mindstate: Light gray divider */
      --highlight: rgba(107, 142, 35, 0.1); /* Mindstate: Green highlight */
      --color-header-bg: #FAFAFA;       /* Mindstate: Very light gray */
      --terminal-bg: #FFFFFF;
      --terminal-text: #000000;         /* Mindstate: Pure black */
      
      /* ==========================================================================
         FEATURE-SPECIFIC VARIABLES
         ========================================================================== */
      
      /* Connection Feature (TEA Explorer) */
      --color-connection-selected-bg: #F0F8F0;     /* Mindstate: Light green tint */
      --color-connection-selected-text: #4A6319;   /* Mindstate: Dark green */
      --color-connection-selected-border: #6B8E23; /* Mindstate: Data green */
      --opacity-connection-no-potential: 0.4;
      
      /* ==========================================================================
         TYPOGRAPHY
         ========================================================================== */
      
      /* Font Families */
      --font-heading: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      --font-body: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      
      /* Line Heights */
      --line-height-tight: 1.4;
      --line-height-normal: 1.6;
      --line-height-loose: 1.8;
      
      /* Mindstate Letter Spacing */
      --ms-letter-spacing-tight: -0.04em;
      --ms-letter-spacing-tighter: -0.06em;
      --ms-letter-spacing-wide: 0.05em;
      
      /* ==========================================================================
         SPACING
         ========================================================================== */
      
      --spacing-xs: 0.25rem;  /* 4px */
      --spacing-sm: 0.5rem;   /* 8px */
      --spacing-md: 1rem;     /* 16px */
      --spacing-lg: 1.5rem;   /* 24px */
      --spacing-xl: 2rem;     /* 32px */
      --spacing-xxl: 3rem;    /* 48px */
      
      /* Mindstate Section Spacing */
      --ms-section-spacing: 7rem; /* 112px - generous whitespace */
      
      /* ==========================================================================
         TRANSITIONS & ANIMATIONS
         ========================================================================== */
      
      /* Mindstate: Reduced transition times for snappier feel */
      --transition-fast: 0.15s;
      --transition-medium: 0.2s;    /* Reduced from 0.3s */
      --transition-slow: 0.3s;      /* Reduced from 0.5s */
      
      /* ==========================================================================
         SHADOWS - MINDSTATE MINIMAL SYSTEM
         ========================================================================== */
      
      /* Mindstate: Single shadows instead of neuomorphic dual shadows */
      --shadow-small: 0 1px 3px rgba(0, 0, 0, 0.05);
      --shadow-medium: 0 2px 6px rgba(0, 0, 0, 0.08);
      --shadow-large: 0 4px 12px rgba(0, 0, 0, 0.1);
      --shadow-inset: none; /* Mindstate: No inset shadows */
      
      /* ==========================================================================
         BORDER RADIUS - MINDSTATE SHARP CORNERS
         ========================================================================== */
      
      /* Mindstate: All sharp corners except circles */
      --radius-sm: 0;      /* Was 4px */
      --radius-md: 0;      /* Was 8px */
      --radius-lg: 0;      /* Was 12px */
      --radius-xl: 0;      /* Was 16px */
      --radius-2xl: 0;     /* Was 20px */
      --radius-round: 50%; /* Keep for circular elements */
  }
  
  /* ==========================================================================
     DARK MODE VARIABLES (Future Enhancement)
     ========================================================================== */
  
  /* Uncomment and customize when implementing dark mode
  @media (prefers-color-scheme: dark) {
      :root {
          --color-bg: #1a1a1a;
          --color-bg-light: #2a2a2a;
          --color-bg-dark: #0a0a0a;
          --color-white: #1a1a1a;
          --color-off-white: #252525;
          
          --color-shadow-light: rgba(255, 255, 255, 0.05);
          --color-shadow-dark: rgba(0, 0, 0, 0.8);
          
          --color-text: #e0e0e0;
          --color-text-dark: #ffffff;
          --color-text-light: #a0a0a0;
      }
  }
  */