/* Req 6.2: mobile-first breakpoints. Base (unprefixed) styles target mobile;
   tablet/desktop layer on top via min-width media queries. Components reference
   these two widths directly in their .module.css files (CSS custom properties can't
   be used inside @media conditions), so keep any change here in sync with usage. */
:root {
  --breakpoint-tablet: 640px;
  --breakpoint-desktop: 1024px;

  --color-text: #1a1a1a;
  --color-text-muted: #5f6368;
  --color-background: #ffffff;
  --color-surface: #f5f6f8;
  --color-border: #e0e2e6;
  --color-primary: #2954e0;
  --color-primary-hover: #1f3fb0;
  --color-danger: #c0362c;
  --color-success: #1f8a4c;

  /* Post-Phase-16 "colorful redesign" tokens: an accent color for headers/highlights/CTAs,
     a header gradient, card-depth shadows, and a dedicated dark palette for the admin
     sidebar/layout so the admin panel reads visually distinct from the public site. */
  --color-accent: #f5820d;
  --color-accent-hover: #d96c02;
  --gradient-header: linear-gradient(135deg, var(--color-primary), var(--color-primary-hover));
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.1);
  --shadow-md: 0 4px 14px rgba(15, 23, 42, 0.12);

  /* Header nav bar — a distinct band under the logo banner (see Header.module.css), not the
     same red as --color-danger (that's reserved for error/destructive UI). */
  --color-navbar-bg: #d21f28;
  --color-navbar-bg-hover: #a91820;
  --color-navbar-active-bg: var(--color-accent);
  --color-navbar-text: #ffffff;

  --color-footer-bg: #101828;
  --color-footer-text: #cbd5e1;
  --color-footer-border: rgba(255, 255, 255, 0.1);

  --color-sidebar-bg: #111827;
  --color-sidebar-text: #cbd5e1;
  --color-sidebar-hover-bg: rgba(255, 255, 255, 0.06);
  --color-sidebar-active-bg: rgba(245, 130, 13, 0.16);

  --font-family-base: 'Noto Sans', 'Noto Sans Devanagari', -apple-system, BlinkMacSystemFont,
    'Segoe UI', Roboto, sans-serif;

  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;

  --radius-sm: 4px;
  --radius-md: 8px;
}