:root {
  /* =========================================================
     BACKGROUND / SURFACE LEVELS
     ========================================================= */
  --bg-app: #D6C3AF;            /* warm clay */
  --bg-screen: #E1D0BD;         /* latte foam */
  --bg-panel: #E9DAC8;          /* aged paper */
  --bg-subpanel: #CDB89F;       /* soft leather */
  --bg-interactive: #BFA98F;    /* tactile input surface */

  /* =========================================================
     CARD / IMAGE CONTAINERS
     ========================================================= */
  --card-border: rgba(112, 85, 58, 0.65); /* rich brown */
 --card-border-active: #7E9BBF; /* calm steel blue */
--card-active-glow: 0 0 0 2px rgba(126, 155, 191, 0.35);

  --card-overlay: rgba(214, 195, 175, 0.401);
  --card-shadow: 0 10px 24px rgba(92, 66, 40, 0.28);

  /* =========================================================
     TEXT COLORS
     ========================================================= */
 --text-primary: #24180F;     /* deeper espresso brown */
--text-secondary: #3E2A1B;   /* strong cocoa */
--text-muted: #5E4736;      /* warm muted */

  /* =========================================================
     ACCENT / FEEDBACK
     ========================================================= */
  --accent-primary: #7E9BBF;    /* calm blue */
  --accent-secondary: #B9836F;  /* clay rose */
  --accent-success: #7E9F8A;    /* sage */
  --accent-warning: #C19A5B;    /* warm amber */
  --accent-danger: #A85E4E;     /* brick */


  /* =========================================================
     TYPOGRAPHY
     ========================================================= */
  --font-primary: "Söhne", sans-serif;
  --font-secondary: "GT Walsheim", sans-serif;

  /* =========================================================
     BORDERS & RADIUS
     ========================================================= */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;

   /* Depth – resting cards */
--shadow-card: 
  0 2px 6px rgba(45, 28, 18, 0.25),
  0 10px 20px rgba(45, 28, 18, 0.35);

/* Depth – hover */
--shadow-card-hover:
  0 4px 10px rgba(45, 28, 18, 0.35),
  0 16px 28px rgba(45, 28, 18, 0.45);

/* Depth – active / pressed */
--shadow-card-active:
  0 2px 4px rgba(45, 28, 18, 0.45);




    html[data-theme="modern-light"] {
  /* Background levels */
  --bg-app: #F4F6FA;
  --bg-screen: #FFFFFF;
  --bg-panel: #FFFFFF;
  --bg-subpanel: #F9FAFB;
  --bg-interactive: #F3F4F6;

  /* Cards */
  --card-border: #E5E7EB;
  --card-border-active: #5B5EFD;
  --card-overlay: rgba(255, 255, 255, 0.25);
  --card-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);

  /* Text */
  --text-primary: #111827;
  --text-secondary: #374151;
  --text-muted: #6B7280;

  /* Accents */
  --accent-primary: #5B5EFD;
  --accent-secondary: #37D0FD;
  --accent-success: #22C55E;
  --accent-warning: #F59E0B;
  --accent-danger: #EF4444;
}

[data-theme="neon-dark"] {
  /* Background levels */
  --bg-app: #091833;
  --bg-screen: #0B1A33;
  --bg-panel: #10244A;
  --bg-subpanel: #133E7C;
  --bg-interactive: #0F2A55;

  /* Cards */
  --card-border: rgba(10, 189, 198, 0.35);
  --card-border-active: #EA00D9;
  --card-overlay: rgba(9, 24, 51, 0.55);
  --card-shadow: none;

  /* Text */
  --text-primary: #E5E7EB;
  --text-secondary: #B6C2E2;
  --text-muted: #7A89B8;

  /* Accents */
  --accent-primary: #EA00D9;
  --accent-secondary: #0ABDC6;
  --accent-success: #00F5A0;
  --accent-warning: #FCEE0C;
  --accent-danger: #FF4D6D;
}


}