/* ========================================
   FILE: frontend/css/variables.css
   ======================================== */

:root {
  /* Brand Colors */
  --color-primary: #0b0e76;
  --color-primary-dark: #090440;
  --color-primary-light: #291ab0;
  --color-secondary: #1A1A1A;
  --color-bg: #FFFFFF;
  --color-bg-light: #F7F7F7;
  --color-bg-dark: #111111;
  --color-text: #1A1A1A;
  --color-text-muted: #6B6B6B;
  --color-text-light: #FFFFFF;
  --color-border: #E0E0E0;
  --color-border-dark: #C0C0C0;
  --color-success: #2ECC71;
  --color-error: #9c1f1f;
  --color-warning: #F39C12;
  --color-info: #3498DB;

  /* Typography */
  --font-primary: 'Poppins', sans-serif;
  --font-size-xs:   0.75rem;    /* 12px */
  --font-size-sm:   0.875rem;   /* 14px */
  --font-size-base: 1rem;       /* 16px */
  --font-size-lg:   1.125rem;   /* 18px */
  --font-size-xl:   1.25rem;    /* 20px */
  --font-size-2xl:  1.5rem;     /* 24px */
  --font-size-3xl:  1.875rem;   /* 30px */
  --font-size-4xl:  2.25rem;    /* 36px */
  --font-size-5xl:  3rem;       /* 48px */
  --font-size-6xl:  4rem;       /* 64px */

  --font-weight-normal:   400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;
  --font-weight-black:    900;

  --line-height-tight:  1.2;
  --line-height-normal: 1.5;
  --line-height-loose:  1.75;

  /* Spacing */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;

  /* Layout */
  --max-width:       1280px;
  --max-width-lg:    1440px;
  --navbar-height:   72px;
  --announcement-height: 40px;

  /* Border radius */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.06);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.10);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.15);
  --shadow-xl: 0 20px 60px rgba(0,0,0,0.20);

  /* Transitions */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;
  --transition-bounce: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Z-index layers */
  --z-below:   -1;
  --z-base:    0;
  --z-raised:  1;
  --z-dropdown: 100;
  --z-sticky:  200;
  --z-navbar:  300;
  --z-drawer:  400;
  --z-modal:   500;
  --z-toast:   600;
  --z-overlay: 700;
}

/* ── Light theme (explicit — mirrors :root defaults) ─── */
[data-theme="light"] {
  --color-bg:          #FFFFFF;
  --color-bg-light:    #F7F7F7;
  --color-bg-dark:     #111111;
  --color-secondary:   #1A1A1A;
  --color-text:        #1A1A1A;
  --color-text-muted:  #6B6B6B;
  --color-border:      #E0E0E0;
  --color-border-dark: #C0C0C0;
}

/* ── Dark theme ───────────────────────────────────────── */
[data-theme="dark"] {
  --color-bg:          #111111;
  --color-bg-light:    #1A1A1A;
  --color-bg-dark:     #000000;
  --color-secondary:   #F0F0F0;
  --color-text:        #F0F0F0;
  --color-text-muted:  #9A9A9A;
  --color-border:      #2A2A2A;
  --color-border-dark: #3A3A3A;
}

/* ── Announcement bar theming ────────────────────────── */
[data-theme="light"] #announcement-bar {
  background: #000000;
  color: #ffffff;
}
[data-theme="dark"] #announcement-bar {
  background: #1A1A1A;
  color: #ffffff;
}