/* ================================
   COLOR TOKENS
   Single source of truth for all colors
   Components reference these, never define colors
   ================================ */

:root {
  /* Brand Colors - Raw Values */
  --color-teal-primary: #1dd1a1;
  --color-teal-dark: #10ac84;
  --color-teal-hover: #10ac84;
  --color-charcoal: #14171a;
  --color-off-white: #e6f4ef;
  --color-deep-teal: #036666;
  --color-black-bg: #222222;
  --color-primary-green: #80EF80;
  --color-lime-base: #10ac84;
  --color-dark-green: #173317;
  --color-light-grey: #6B7280;
  --color-white: #F5F5F5;

  /* Semantic Color Tokens - Components reference these */
  --bg-page: var(--color-black-bg);
  --bg-surface: var(--color-charcoal);
  --bg-surface-elevated: rgba(20, 23, 26, 0.95);

  --text-primary: var(--color-off-white);
  --text-secondary: rgba(230, 244, 239, 0.85);
  --text-tertiary: rgba(230, 244, 239, 0.7);
  --text-heading: var(--color-deep-teal);
  --text-dark: #14171a;
  --text-light: var(--color-off-white);

  --accent-primary: var(--color-teal-primary);
  --accent-secondary: var(--color-primary-green);
  --accent-hover: var(--color-teal-dark);

  --border-subtle: rgba(29, 209, 161, 0.1);
  --border-medium: rgba(29, 209, 161, 0.2);
  --border-strong: rgba(29, 209, 161, 0.3);

  /* Gradients */
  --gradient-teal: linear-gradient(135deg, var(--color-teal-primary), var(--color-teal-dark));
  --gradient-green: linear-gradient(135deg, var(--color-primary-green), #66CC66);

  /* Component-Specific Color Mappings */
  --button-primary-bg: var(--gradient-teal);
  --button-primary-text: #0b1a14;
  --button-secondary-bg: rgba(29, 209, 161, 0.15);
  --button-secondary-text: var(--color-primary-green);
  --button-secondary-border: rgba(29, 209, 161, 0.5);

  --nav-bg: var(--color-charcoal);
  --nav-text: var(--color-off-white);
  --nav-accent: var(--color-teal-primary);

  --card-bg: var(--color-charcoal);
  --card-bg-glass: rgba(20, 23, 26, 0.7);
  --card-border: rgba(120, 220, 160, 0.1);
  --card-glow: rgba(120, 220, 160, 0.12);

  /* Glass Morphism Effects */
  --glass-bg: rgba(20, 23, 26, 0.7);
  --glass-bg-hover: rgba(20, 40, 35, 0.24);
  --glass-border: rgba(120, 220, 160, 0.12);
  --glass-border-hover: rgba(120, 220, 160, 0.18);

  /* Overlay Colors */
  --overlay-dark: rgba(10, 12, 13, 0.95);
  --overlay-medium: rgba(0, 0, 0, 0.7);
  --overlay-light: rgba(0, 0, 0, 0.4);

  /* State Colors */
  --color-error: #ff4d4d;
  --color-info: #3498db;
  --color-info-dark: #2980b9;

  /* Glass Effect Colors (for card shine and hover effects) */
  --glass-teal-light: rgba(120, 220, 140, 0.16);
  --glass-teal-lighter: rgba(120, 220, 140, 0.05);
  --glass-teal-border: rgba(120, 220, 160, 0.08);
  --glass-teal-hover-subtle: rgba(29, 209, 161, 0.05);
  --glass-teal-hover: rgba(29, 209, 161, 0.25);

  /* Shine Effect Colors (for card animations) */
  --shine-teal: #1dd1a1;
  --shine-gradient-start: rgba(120, 220, 140, 0);
  --shine-gradient-mid: rgba(52, 211, 153, 0.18);

  /* Error/Alert Colors */
  --error-bg: rgba(220, 38, 38, 0.2);
  --error-text: #fca5a5;
  --error-border: rgba(220, 38, 38, 0.3);

  /* Nav/Overlay Colors */
  --nav-overlay-bg: rgba(20, 23, 26, 0.7);
  --glass-etch-stroke: rgba(180, 255, 210, 0.35);
  --launch-offer-bg: rgba(29, 209, 161, 0.08);
  --badge-shadow: rgba(29, 209, 161, 0.3);
}