/* ==========================================
   CSS VARIABLES
   Централізовані змінні для всього проекту
   ========================================== */

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&family=Montserrat:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');

/* ==========================================
   LIGHT THEME (Default) - Coastal Teal/Slate
   ========================================== */
:root {
   /* ==========================================
      FIXED PALETTE
      ========================================== */
   /* Neutrals */
   --color-white: #ffffff;
   --color-black: #000000;
   --color-neutral-50: #f6f8f9;
   --color-neutral-100: #eef2f4;
   --color-neutral-150: #e5eaee;
   --color-neutral-200: #dde3e8;
   --color-neutral-250: #d3dbe1;
   --color-neutral-300: #c7d1d8;
   --color-neutral-350: #bcc6cf;
   --color-neutral-400: #aeb9c3;
   --color-neutral-450: #a1adba;
   --color-neutral-500: #95a2b0;
   --color-neutral-550: #82909f;
   --color-neutral-600: #687584;
   --color-neutral-700: #4d5a67;
   --color-neutral-800: #323d48;
   --color-neutral-850: #28323b;
   --color-neutral-875: #212a33;
   --color-neutral-900: #1b232b;
   --color-neutral-950: #12171d;

   /* Slate/Sage */
   --color-slate-300: #c7d1dc;
   --color-slate-400: #b0bcc8;
   --color-slate-600: #7b8794;
   --color-sage-100: #e7efea;
   --color-sage-200: #d6e3dd;
   --color-sage-400: #91b0a3;
   --color-sage-500: #7d9d90;
   --color-sage-600: #698679;

   /* Ink/Navy/Teal */
   --color-ink-900: #0c1217;
   --color-navy-700: #2a3a46;
   --color-navy-800: #10161c;
   --color-navy-850: #0f2a3a;
   --color-navy-900: #141d25;
   --color-navy-950: #0b1116;
   --color-teal-850: #123236;
   --color-teal-900: #0e2b2d;

   /* Browns */
   --color-brown-750: #3d3629;
   --color-brown-800: #332f23;
   --color-brown-850: #2c291f;
   --color-brown-900: #27231c;
   --color-brown-950: #2c1e00;

   /* Greens/Teal */
   --color-green-100: #d4edda;
   --color-green-300: #7dd87d;
   --color-green-400: #38c172;
   --color-green-450: #2ecc71;
   --color-green-500: #28a745;
   --color-green-550: #27c367;
   --color-green-600: #218838;
   --color-green-700: #00a651;
   --color-green-800: #155724;
   --color-green-900: #134d24;
   --color-green-950: #14320d;
   --color-teal-450: #1abc9c;
   --color-teal-500: #20c997;
   --color-teal-600: #15967d;

   /* Blues */
   --color-blue-50: #e3f2fd;
   --color-blue-300: #74c0fc;
   --color-blue-500: #2196f3;
   --color-blue-600: #007bff;

   /* Lime/Yellow/Amber/Orange */
   --color-lime-500: #8dc63f;
   --color-yellow-400: #ffd43b;
   --color-yellow-500: #fcee21;
   --color-amber-50: #fff3cd;
   --color-amber-100: #fce6b2;
   --color-amber-400: #f6993f;
   --color-amber-500: #ffc107;
   --color-amber-600: #f39c12;
   --color-amber-700: #d78b0c;
   --color-amber-800: #856404;
   --color-amber-900: #8c5e00;
   --color-orange-300: #f4a460;
   --color-orange-500: #ff9500;
   --color-orange-600: #f7931e;
   --color-orange-650: #fd7e14;
   --color-orange-700: #f15a24;
   --color-orange-800: #ff4d00;

   /* Reds */
   --color-red-300: #ff5252;
   --color-red-400: #ff1744;
   --color-red-500: #e74c3c;
   --color-red-550: #e3342f;
   --color-red-600: #dc3545;
   --color-red-650: #cf2d3b;
   --color-red-700: #c0392b;
   --color-red-750: #c1272d;
   --color-red-800: #ed1c24;
   --color-red-850: #721c24;
   --color-red-900: #7d1414;
   --color-red-950: #4d1212;

   /* RGB Helpers (keep in sync with palette values above) */
   --rgb-black: 0, 0, 0;
   --rgb-white: 255, 255, 255;
   --rgb-neutral-550: 130, 144, 159;
   --rgb-sage-400: 145, 176, 163;
   --rgb-brand-primary: 31, 122, 108;
   --rgb-brand-info: 58, 135, 184;
   --rgb-brand-warning: 213, 160, 74;
   --rgb-green-450: 46, 204, 113;
   --rgb-green-500: 40, 167, 69;
   --rgb-teal-450: 26, 188, 156;
   --rgb-blue-500: 52, 152, 219;
   --rgb-blue-600: 0, 123, 255;
   --rgb-amber-500: 255, 193, 7;
   --rgb-amber-600: 243, 156, 18;
   --rgb-orange-300: 244, 164, 96;
   --rgb-red-500: 231, 76, 60;
   --rgb-navy-800: 16, 22, 28;

   /* Brand Palette */
   --brand-primary: #1f7a6c;
   --brand-primary-hover: #186556;
   --brand-primary-dark: #134e44;
   --brand-secondary: #97b4a7;
   --brand-info: #3a87b8;
   --brand-info-hover: #2f739e;
   --brand-info-dark: #265f83;
   --brand-warning: #d5a04a;
   --brand-warning-hover: #bf8a37;
   --brand-warning-dark: #a4732a;
   --brand-danger: #d36a5f;
   --brand-danger-hover: #bc5448;
   --brand-success: #3a9f70;
   --brand-success-hover: #2f8a60;

   /* Gradients */
   --gradient-hero: linear-gradient(
      135deg,
      var(--brand-primary) 0%,
      var(--brand-primary-hover) 38%,
      var(--brand-info) 100%
   );

   /* Primary Colors - Juniper Teal */
   --primary: var(--brand-primary);
   --primary-hover: var(--brand-primary-hover);
   --primary-dark: var(--brand-primary-dark);

   /* Secondary Colors - Soft Sage */
   --secondary: var(--brand-secondary);

   /* Info Colors - Atlantic Blue */
   --info: var(--brand-info);
   --info-hover: var(--brand-info-hover);
   --info-dark: var(--brand-info-dark);

   /* Warning Colors - Warm Amber */
   --warning: var(--brand-warning);
   --warning-hover: var(--brand-warning-hover);
   --warning-dark: var(--brand-warning-dark);

   /* Danger Colors - Coral */
   --danger: var(--brand-danger);
   --danger-hover: var(--brand-danger-hover);

   /* Success Colors - Emerald */
   --success: var(--brand-success);
   --success-hover: var(--brand-success-hover);

   /* Dark Theme Base Colors */
   --dark: var(--color-navy-800);
   --dark-surface: #18222b;
   --dark-hover: #22303b;

   /* Light Colors */
   --light: var(--color-neutral-100);

   /* Text Colors */
   --text: var(--color-neutral-900);
   --text-muted: var(--color-neutral-600);
   --text-dark: var(--color-neutral-500);
   --text-link: var(--brand-primary);

   /* Background Colors */
   --body-background: var(--color-neutral-50);
   --bg-card: var(--color-white);
   --bg-navbar: rgba(var(--rgb-white), 0.97);

   /* Border Colors */
   --border: var(--color-neutral-300);
   --border-light: rgba(var(--rgb-black), 0.05);

   /* Shadow */
   --shadow-sm: 0 2px 10px rgba(var(--rgb-black), 0.1);
   --shadow: 0 4px 15px rgba(var(--rgb-black), 0.15);
   --shadow-lg: 0 10px 25px rgba(var(--rgb-black), 0.2);

   /* Transition */
   --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   --transition-fast: all 0.15s ease;

   /* Border Radius */
   --radius-sm: 0.375rem;
   --radius: 0.5rem;
   --radius-lg: 1rem;

   /* Spacing */
   --spacing-xs: 0.25rem;
   --spacing-sm: 0.5rem;
   --spacing-md: 1rem;
   --spacing-lg: 1.5rem;
   --spacing-xl: 2rem;

   /* Typography */
   --font-family-base: "Noto Sans", sans-serif;
   --font-family-heading: 'Montserrat', sans-serif;
}

/* ==========================================
   DARK THEME
   ========================================== */
body.dark-mode {
   /* Primary Colors - Darker variants */
   --primary: #43c2a1;
   --primary-hover: #35ab8e;
   --secondary: #7fa395;

   /* Background Colors */
   --body-background: var(--dark);
   --bg-card: var(--dark-surface);
   --bg-navbar: rgba(var(--rgb-navy-800), 0.92);

   /* Text Colors */
   --text: var(--light);
   --text-muted: var(--text-dark);

   /* Border Colors */
   --border: rgba(var(--rgb-white), 0.12);
   --border-light: rgba(var(--rgb-white), 0.06);

   /* Shadow */
   --shadow-sm: 0 2px 10px rgba(var(--rgb-black), 0.2);
   --shadow: 0 4px 20px rgba(var(--rgb-black), 0.3);
   --shadow-lg: 0 8px 30px rgba(var(--rgb-black), 0.4);

   /* Dark Mode Button Colors */
   --dm-primary: #2f8f79;
   --dm-info: #3b7fa6;
   --dm-warning: #b58434;
   --dm-secondary: #6b808c;
   --dm-success: #2f8a60;
   --dm-danger: #a5574d;
   --dm-light: #313d48;
   --dm-dark: var(--color-slate-400);

   /* Dark Mode Text */
   --dm-text-light: var(--color-white);
   --dm-text-dark: #d6dde5;

   /* Gradients */
   --gradient-hero: linear-gradient(
      135deg,
      var(--color-teal-900) 0%,
      var(--dark-hover) 45%,
      var(--color-navy-900) 100%
   );
}