/* ========================================================================
   CSS CUSTOM PROPERTIES (VARIABLES)
   ========================================================================

   This file contains all CSS custom properties (variables) for both light
   and dark modes. These variables are used throughout the application.

   DO NOT put utility classes here - they go in 2-utilities.css
   ======================================================================== */

/* Light Mode (Default) */
:root {
  /* Brand Colors */
  --primary: #B7CEB0;             /* Sage green */
  --primary-hover: #A8C49A;       /* Slightly darker sage for hover */
  --primary-rgb: 139, 184, 150;     /* Sage RGB */
  --primary-dark: #27521a;        /* Dark green for button text */
  --primary-light: #D4E7D7;       /* Light Green Surfaces */
  --primary-dark-rgb: 39, 82, 26;
  --accent: #E2A9A9;              /* Dusty rose */
  --accent-hover: #D4847A;        /* Darker dusty rose for hover */
  --accent-rgb: 226, 169, 169;      /* Dusty rose RGB */

  --sage-green: #8BB896;
  --rose-pink: #EBA5B8;
  --dark-slate: #3E4853;
  --medium-slate: #7C8A96;
  --light-green: #D4E7D7;
  --cream: #F5EFE6;
  --soft-blue-gray: #A8BCC4;

  --neutral: #6c757d;             /* Keep existing neutral */
  --neutral-hover: #565e64;
  --neutral-rgb: 108, 117, 125;
  --neutral-light: #a8bcc4;
  --neutral-light-hover: rgb(154, 170, 181);
  --neutral-light-rgb: 168, 188, 196;
  --neutral-light-hover-rgb: 154, 170, 181;
  
  --cta: #fdcb6e;                 /* Keep your golden CTA */
  --cta-dark: #f39c12;
  --cta-rgb: 253, 203, 110;

  /* Neutral System */
  --background: #F1EDE6;          /* Warm cream background */
  --surface: #FCFBF9;             /* Warm white for cards */
  --surface-secondary: #F5EFE6;   /* Light Cream for cards */
  --surface-tertiary: #e9e8db;   /* Light Cream for cards */
  --border-light: rgba(66, 75, 84, 0.05); /* Light border using text color */
  --border: rgba(66, 75, 84, 0.1); /* Light border using text color */
  --border-heavy: rgba(66, 75, 84, 0.30); /* #424b54
  /* Text Colors */
  --text: #3E4853;                /* Charcoal for body text */
  --text-rgb: 66, 75, 84;
  --text-muted: rgba(66, 75, 84, 0.6);    /* 60% charcoal for muted */
  --text-muted-rgb: 66, 75, 84;           /* Same RGB, use with opacity */
  --text-inverse: #F1EDE6;        /* Light text for dark backgrounds */
  --text-inverse-rgb: 241, 237, 230;

  /* Semantic Colors - Keep existing */
  --success: #48bb78;
  --success-rgb: 72, 187, 120;
  --danger: #f56565;
  --danger-rgb: 245, 101, 101;
  --info: #4299e1;
  --info-rgb: 66, 153, 225;
  --warning: #d69e2e;
  --warning-rgb: 214, 158, 46;

  --danger-15: rgba(245, 101, 101, 0.15);
  --success-15: rgba(72, 187, 120, 0.15);

  /* Opacity Variants */
  --background-15: rgba(241, 237, 230, 0.15);
  --background-25: rgba(241, 237, 230, 0.25);
  --background-50: rgba(241, 237, 230, 0.50);
  --background-75: rgba(241, 237, 230, 0.75);

  --primary-5: rgba(var(--primary-rgb), 0.05);
  --primary-10: rgba(var(--primary-rgb), 0.1);
  --primary-15: rgba(var(--primary-rgb), 0.15);
  --primary-25: rgba(var(--primary-rgb), 0.25);
  --primary-33: rgba(var(--primary-rgb), 0.33);
  --primary-50: rgba(var(--primary-rgb), 0.50);
  --primary-65: rgba(var(--primary-rgb), 0.65);
  --primary-75: rgba(var(--primary-rgb), 0.75);
  --primary-90: rgba(var(--primary-rgb), 0.90);
  --primary-dark-50: rgba(var(--primary-dark-rgb), 0.50);

  --accent-5: rgba(var(--accent-rgb), 0.05);
  --accent-10: rgba(var(--accent-rgb), 0.1);
  --accent-15: rgba(var(--accent-rgb), 0.15);
  --accent-25: rgba(var(--accent-rgb), 0.25);
  --accent-33: rgba(var(--accent-rgb), 0.33);
  --accent-50: rgba(var(--accent-rgb), 0.50);
  --accent-75: rgba(var(--accent-rgb), 0.75);
  --accent-90: rgba(var(--accent-rgb), 0.90);

  --neutral-5: rgba(var(--neutral-rgb), 0.05);
  --neutral-10: rgba(var(--neutral-rgb), 0.1);
  --neutral-15: rgba(var(--neutral-rgb), 0.15);
  --neutral-25: rgba(var(--neutral-rgb), 0.25);
  --neutral-50: rgba(var(--neutral-rgb), 0.50);
  --neutral-75: rgba(var(--neutral-rgb), 0.75);

  --success-5: rgba(var(--success-rgb), 0.05);
  --success-10: rgba(var(--success-rgb), 0.1);
  --success-15: rgba(var(--success-rgb), 0.15);
  --success-25: rgba(var(--success-rgb), 0.25);
  --success-50: rgba(var(--success-rgb), 0.50);
  --success-65: rgba(var(--success-rgb), 0.66);
  --success-75: rgba(var(--success-rgb), 0.75);
  
  --danger-5: rgba(var(--danger-rgb), 0.05);
  --danger-10: rgba(var(--danger-rgb), 0.1);
  --danger-25: rgba(var(--danger-rgb), 0.25);
  --danger-50: rgba(var(--danger-rgb), 0.50);
  --danger-75: rgba(var(--danger-rgb), 0.75);
  
  --info-5: rgba(var(--info-rgb), 0.05);
  --info-10: rgba(var(--info-rgb), 0.1);
  --info-50: rgba(var(--info-rgb), 0.50);
  --info-75: rgba(var(--info-rgb), 0.75);

  --warning-5: rgba(var(--warning-rgb), 0.05);
  --warning-10: rgba(var(--warning-rgb), 0.1);
  --warning-25: rgba(var(--warning-rgb), 0.25);
  --warning-50: rgba(var(--warning-rgb), 0.50);
  --warning-75: rgba(var(--warning-rgb), 0.75);

  --cta-50: rgba(var(--cta-rgb), 0.50);

  /* Text Opacity Variants */
  --text-5: rgba(var(--text-rgb), 0.05);
  --text-10: rgba(var(--text-rgb), 0.1);
  --text-15: rgba(var(--text-rgb), 0.15);
  --text-25: rgba(var(--text-rgb), 0.25);
  --text-50: rgba(var(--text-rgb), 0.50);
  --text-75: rgba(var(--text-rgb), 0.75);
  --text-90: rgba(var(--text-rgb), 0.90);
}

/* Dark Mode Overrides - Only when html has dark theme */
html[data-theme="dark"] {
  /* Brand Colors */
  --primary: #A9C9E2;             /* Powder blue */
  --primary-hover: #8bb5d8;       /* Darker powder blue for hover */
  --primary-rgb: 169, 201, 226;     /* Powder blue RGB */
  --primary-dark: #1B365D;        /* Dark navy for button text */
  --primary-light: #44505d;       /* Light Green Surfaces */
  --primary-dark-rgb: 27, 54, 93;   /* Dark navy for button text */

  --primary-dark-50: rgba(var(--primary-dark-rgb), 0.5);

  --sage-green: #6B9B7A;           /* Muted sage green */
  --rose-pink: #C88A9D;            /* Muted rose pink */
  --dark-slate: #D1D5DB;           /* Softer light gray for text */
  --medium-slate: #9CA3AF;         /* Muted gray for secondary text */
  --light-green: #1F2F25;          /* Very dark green for borders */
  --cream: #1A1D23;                /* Dark card background */

  --warning: #ecc94b;
  --warning-rgb: 236, 201, 75;

  --accent: #B7CEB0;              /* Sage as accent */
  --accent-hover: #A8C49A;        /* Darker sage for hover */
  --accent-rgb: 183, 206, 176;      /* Sage RGB */

  --neutral: #6c757d;
  --neutral-hover: #565e64;
  --neutral-rgb: 108, 117, 125;

  --neutral-light: #3A4A54;
  --neutral-light-hover: #505e67;
  --neutral-light-rgb: 168, 188, 196;
  --neutral-light-hover-rgb: 58, 74, 84;

  --cta: #fdcb6e;                 /* Keep golden CTA */
  --cta-rgb: 253, 203, 110;

  /* Neutral System */
  --background: #262624;          /* RGB(38,38,36) - softer dark background */
  --surface: #333333;             /* Dark gray cards */
  --surface-secondary: #1E2328;   /* Dark card background */
  --border-light: rgba(241, 237, 230, 0.15); /* Light border using warm cream */
  --border: rgba(241, 237, 230, 0.1); /* Light border using warm cream */
  --border-heavy: rgba(241, 237, 230, 0.3);

  /* Text Colors */
  --text: #F1EDE6;                /* Warm cream text */
  --text-rgb: 241, 237, 230;
  --text-muted: rgba(241, 237, 230, 0.7);    /* 70% cream for muted */
  --text-muted-rgb: 241, 237, 230;
  --text-inverse: #424B54;        /* Dark text for light backgrounds */
  --text-inverse-rgb: 66, 75, 84;

  /* Semantic Colors */
  --success: #48bb78;
  --success-rgb: 72, 187, 120;
  --danger: #f56565;
  --danger-rgb: 245, 101, 101;
  --info: #4299e1;
  --info-rgb: 66, 153, 225;

  /* Opacity Variants */
  --primary-5: rgba(var(--primary-rgb), 0.05);
  --primary-10: rgba(var(--primary-rgb), 0.1);
  --primary-15: rgba(var(--primary-rgb), 0.15);
  --primary-25: rgba(var(--primary-rgb), 0.25);
  --primary-50: rgba(var(--primary-rgb), 0.50);
  --primary-75: rgba(var(--primary-rgb), 0.75);

  --accent-5: rgba(var(--accent-rgb), 0.05);
  --accent-10: rgba(var(--accent-rgb), 0.1);
  --accent-15: rgba(var(--accent-rgb), 0.15);
  --accent-25: rgba(var(--accent-rgb), 0.25);
  --accent-50: rgba(var(--accent-rgb), 0.50);
  --accent-75: rgba(var(--accent-rgb), 0.75);
  --accent-90: rgba(var(--accent-rgb), 0.90);

  --neutral-5: rgba(var(--neutral-rgb), 0.05);
  --neutral-10: rgba(var(--neutral-rgb), 0.1);
  --neutral-15: rgba(var(--neutral-rgb), 0.15);
  --neutral-25: rgba(var(--neutral-rgb), 0.25);
  --neutral-50: rgba(var(--neutral-rgb), 0.50);
  --neutral-75: rgba(var(--neutral-rgb), 0.75);

  --success-5: rgba(var(--success-rgb), 0.05);
  --success-10: rgba(var(--success-rgb), 0.1);
  --success-25: rgba(var(--success-rgb), 0.25);
  --success-50: rgba(var(--success-rgb), 0.50);
  --success-75: rgba(var(--success-rgb), 0.75);

  --danger-5: rgba(var(--danger-rgb), 0.05);
  --danger-10: rgba(var(--danger-rgb), 0.1);
  --danger-50: rgba(var(--danger-rgb), 0.50);
  --danger-75: rgba(var(--danger-rgb), 0.75);

  --warning-5: rgba(var(--warning-rgb), 0.05);
  --warning-10: rgba(var(--warning-rgb), 0.1);
  --warning-25: rgba(var(--warning-rgb), 0.25);
  --warning-50: rgba(var(--warning-rgb), 0.50);
  --warning-75: rgba(var(--warning-rgb), 0.75);

  --info-5: rgba(var(--info-rgb), 0.05);
  --info-10: rgba(var(--info-rgb), 0.1);
  --info-50: rgba(var(--info-rgb), 0.50);
  --info-75: rgba(var(--info-rgb), 0.75);

  --background-15: rgba(38, 38, 36, 0.15);
  --background-25: rgba(38, 38, 36, 0.15);
  --background-50: rgba(38, 38, 36, 0.15);
  --background-75: rgba(38, 38, 36, 0.15);

  /* Text Opacity Variants */
  --text-5: rgba(var(--text-rgb), 0.05);
  --text-10: rgba(var(--text-rgb), 0.1);
  --text-15: rgba(var(--text-rgb), 0.15);
  --text-25: rgba(var(--text-rgb), 0.25);
  --text-50: rgba(var(--text-rgb), 0.50);
  --text-75: rgba(var(--text-rgb), 0.75);
  --text-90: rgba(var(--text-rgb), 0.90);

  --text-muted-5: rgba(var(--text-muted-rgb), 0.05);
  --text-muted-10: rgba(var(--text-muted-rgb), 0.1);
  --text-muted-15: rgba(var(--text-muted-rgb), 0.15);
  --text-muted-25: rgba(var(--text-muted-rgb), 0.25);
  --text-muted-50: rgba(var(--text-muted-rgb), 0.50);
  --text-muted-75: rgba(var(--text-muted-rgb), 0.75);

  --text-inverse-5: rgba(var(--text-inverse-rgb), 0.05);
  --text-inverse-10: rgba(var(--text-inverse-rgb), 0.1);
  --text-inverse-15: rgba(var(--text-inverse-rgb), 0.15);
  --text-inverse-25: rgba(var(--text-inverse-rgb), 0.25);
  --text-inverse-50: rgba(var(--text-inverse-rgb), 0.50);
  --text-inverse-75: rgba(var(--text-inverse-rgb), 0.75);
}