/* =========================================================
   WEBSITE THEME VARIABLES
   Frontend Design Ecosystem
========================================================= */

/* =========================================================
   LIGHT THEME (DEFAULT)
========================================================= */

:root {

   /* =====================================================
     BACKGROUNDS
  ===================================================== */

   --bg-primary: #F8FAFC;
   --bg-secondary: #F1F5F9;
   --bg-tertiary: #E2E8F0;

   /* =====================================================
     SURFACES
  ===================================================== */

   --surface-primary: #FFFFFF;
   --surface-secondary: #F8FAFC;
   --surface-hover: #EEF2F7;
   --surface-active: #E2E8F0;

   /* =====================================================
     BORDERS
  ===================================================== */

   --border-primary: #CBD5E1;
   --border-secondary: #94A3B8;
   --border-subtle: rgba(15, 23, 42, 0.06);

   /* =====================================================
     TEXT COLORS
  ===================================================== */

   --text-primary: #0F172A;
   --text-secondary: #334155;
   --text-muted: #64748B;
   --text-disabled: #94A3B8;
   --text-inverse: #FFFFFF;

   /* =====================================================
     BRAND COLORS
  ===================================================== */

   --color-primary: #912D6E;
   --color-primary-hover: #7C2660;
   --color-primary-active: #6A2053;
   --color-primary-soft: rgba(145, 45, 110, 0.10);

   --color-secondary: #4F5091;
   --color-secondary-hover: #454680;

   --color-highlight: #C44D87;

   /* =====================================================
     STATE COLORS
  ===================================================== */

   --success: #16A34A;
   --warning: #D97706;
   --danger: #DC2626;
   --info: #0284C7;

   /* =====================================================
     SHADOWS
  ===================================================== */

   --shadow-color: rgba(15, 23, 42, 0.08);

   --shadow-sm:
      0 1px 2px rgba(15, 23, 42, 0.04);

   --shadow-md:
      0 4px 12px rgba(15, 23, 42, 0.08);

   --shadow-lg:
      0 10px 25px rgba(15, 23, 42, 0.12);

   /* =====================================================
     OVERLAY
  ===================================================== */

   --overlay: rgba(15, 23, 42, 0.40);

   /* =====================================================
     SCROLLBAR
  ===================================================== */

   --scrollbar-track: #E2E8F0;
   --scrollbar-thumb: #CBD5E1;
   --scrollbar-thumb-hover: #94A3B8;

   /* =====================================================
     SELECTION
  ===================================================== */

   --selection-bg: rgba(145, 45, 110, 0.18);

   /* =====================================================
     TRANSITIONS
  ===================================================== */

   --transition-fast: 0.15s ease;
   --transition-normal: 0.25s ease;
   --transition-slow: 0.4s ease;

}


/* =========================================================
   DARK THEME
========================================================= */

[data-theme="dark"] {

   /* =====================================================
     BACKGROUNDS
  ===================================================== */

   --bg-primary: #0F172A;
   --bg-secondary: #111827;
   --bg-tertiary: #1E293B;

   /* =====================================================
     SURFACES
  ===================================================== */

   --surface-primary: #1E293B;
   --surface-secondary: #273449;
   --surface-hover: #334155;
   --surface-active: #3B475C;

   /* =====================================================
     BORDERS
  ===================================================== */

   --border-primary: #334155;
   --border-secondary: #475569;
   --border-subtle: rgba(255, 255, 255, 0.06);

   /* =====================================================
     TEXT COLORS
  ===================================================== */

   --text-primary: #F8FAFC;
   --text-secondary: #CBD5E1;
   --text-muted: #94A3B8;
   --text-disabled: #64748B;
   --text-inverse: #0F172A;

   /* =====================================================
     BRAND COLORS
  ===================================================== */

   --color-primary: #C9619C;
   --color-primary-hover: #D67BAE;
   --color-primary-active: #E193BD;
   --color-primary-soft: rgba(201, 97, 156, 0.16);

   --color-secondary: #768ECB;
   --color-secondary-hover: #8EA3D8;

   --color-highlight: #E59CC4;

   /* =====================================================
     STATE COLORS
  ===================================================== */

   --success: #22C55E;
   --warning: #F59E0B;
   --danger: #EF4444;
   --info: #0EA5E9;

   /* =====================================================
     SHADOWS
  ===================================================== */

   --shadow-color: rgba(0, 0, 0, 0.35);

   --shadow-sm:
      0 1px 2px rgba(0, 0, 0, 0.20);

   --shadow-md:
      0 6px 18px rgba(0, 0, 0, 0.28);

   --shadow-lg:
      0 14px 35px rgba(0, 0, 0, 0.40);

   /* =====================================================
     OVERLAY
  ===================================================== */

   --overlay: rgba(0, 0, 0, 0.60);

   /* =====================================================
     SCROLLBAR
  ===================================================== */

   --scrollbar-track: #111827;
   --scrollbar-thumb: #334155;
   --scrollbar-thumb-hover: #475569;

   /* =====================================================
     SELECTION
  ===================================================== */

   --selection-bg: rgba(201, 97, 156, 0.24);

}