/* ======================= ChessMaster Design System ======================== */

:root{

   /* ======================= Colors ========================= */
   --primary-color: #D4AF37;
   --primary-hover: #C49B22; 

   --pages-color: #101521; 
   --background-color: #0B0F19;
   --surface-color: #151B2D;
   --surface-hover: #1F2940;

   --white-color: #FFFFFF;
   --black-color: #111;
   --text-primary: #F8F9FA;
   --text-secondary: #B0B7C3;

   --success-color: #22C55E;
   --warning-color: #F59E0B;
   --danger-color: #EF4444;

   --offline-color: #6b7280;
   --online-color: #22c55e;

   --border-color: rgba(255,255,255,0.08);

   /* ====================== Typography ====================== */
   --font-family: "Poppins", sans-serif;

   --font-xs: 12px;
   --font-sm: 14px;
   --font-md: 16px;
   --font-lg: 20px;
   --font-xl: 25px;
   --font-xxl: 40px;

   /* ========================= Font Weight ======================== */
   --light: 300;
   --regular: 400;
   --medium: 500;
   --semi-bold: 600;
   --bold: 700;

   /* ======================= Border Radius ====================== */
   --radius-sm: 8px;
   --radius-md: 12px;
   --radius-lg: 18px;
   --radius-xl: 24px;

   /* ========================= Spacing ========================= */ 
   --space-xs: 5px;
   --space-sm: 11px;
   --space-md: 20px;
   --space-lg: 30px;
   --space-xl: 40px;

   --space-new: 15px;

   /* ======================== Shadow ======================= */
   --shadow-sm: 0 2px 8px rgba(0,0,0,.20);
   --shadow-md: 0 6px 18px rgba(0,0,0,.30);
   --shadow-lg: 0 12px 30px rgba(0,0,0,.40);

   /* ======================== Transition ========================= */
   --transition: all .30s ease;
}



/* ========================== LIGHT MODE ====================== */
:root[data-theme="light"] {

    --primary-color: #B8860B;
    --primary-hover: #9A7209;
    --pages-color: #F5F6F8;
    --background-color: #FFFFFF;
    --surface-color: #FFFFFF;
    --surface-hover: #F0F1F3;
    --white-color: #FFFFFF;
    --black-color: #111111;
    --text-primary: #111827;
    --text-secondary: #6B7280;
    --success-color: #16A34A;
    --warning-color: #D97706;
    --danger-color: #DC2626;
    --offline-color: #6B7280;
    --online-color: #22C55E;
    --border-color: rgba(0, 0, 0, 0.10);

    /* ======================== Shadow ======================= */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 12px 30px rgba(0, 0, 0, 0.16);
}