/* ============================================
   DESIGN SYSTEM — variables.css
   Royal Crystal Academy
   Premium University Style — Dark Maroon & Gold
   ============================================ */

:root {

  /* ---- Brand Colors ---- */
  --color-primary:        #6B0F1A;   /* Deep maroon */
  --color-primary-light:  #8B1A28;   /* Lighter maroon */
  --color-primary-dark:   #4A0A12;   /* Darker maroon */
  --color-secondary:      #C9960C;   /* Gold */
  --color-secondary-light:#E8B02A;   /* Light gold */
  --color-secondary-dark: #A07A08;   /* Dark gold */
  --color-accent:         #F4E4B0;   /* Cream/pale gold */

  /* ---- Neutrals ---- */
  --color-white:   #FFFFFF;
  --color-off-white: #FAF9F7;
  --color-light:   #F5F0EB;
  --color-border:  #E8E0D8;
  --color-muted:   #9B8FA0;
  --color-text:    #2C2420;
  --color-text-light: #6B5E58;
  --color-dark:    #1A0F0D;

  /* ---- Admin Colors (keep for admin pages) ---- */
  --color-admin-primary: #0f1b2d;
  --color-admin-accent:  #1d4ed8;

  /* ---- Typography ---- */
  --font-heading: 'Poppins', sans-serif;
  --font-body:    'Inter', sans-serif;

  --fs-xs:   0.75rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-lg:   1.125rem;
  --fs-xl:   1.25rem;
  --fs-2xl:  1.5rem;
  --fs-3xl:  1.875rem;
  --fs-4xl:  2.25rem;
  --fs-5xl:  3rem;
  --fs-6xl:  3.75rem;

  /* ---- Spacing ---- */
  --space-xs:  0.25rem;
  --space-sm:  0.5rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;

  /* ---- Border Radius ---- */
  --radius-sm:  4px;
  --radius:     8px;
  --radius-md:  12px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-full: 9999px;

  /* ---- Shadows ---- */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.08);
  --shadow:     0 4px 16px rgba(107,15,26,0.12);
  --shadow-md:  0 8px 32px rgba(107,15,26,0.15);
  --shadow-lg:  0 16px 48px rgba(107,15,26,0.20);
  --shadow-xl:  0 24px 64px rgba(0,0,0,0.25);

  /* ---- Transitions ---- */
  --transition: all 0.3s ease;
  --transition-fast: all 0.15s ease;
  --transition-slow: all 0.5s ease;

  /* ---- Layout ---- */
  --container-max: 1280px;
  --container-pad: 1.5rem;
  --nav-height:    70px;

  /* ---- Z-Index ---- */
  --z-below:   -1;
  --z-normal:  1;
  --z-above:   10;
  --z-nav:     100;
  --z-modal:   500;
  --z-toast:   999;
}

/* ---- Dark mode support ---- */
@media (prefers-color-scheme: dark) {
  /* Keep light for school site */
}