/* ==========================================================================
   School Website Template - Design Tokens & Variables
   Palette: Primary Blue (#0A3872), Sage Green (#6B8E6E), Warm Cream (#F3E9D2)
   ========================================================================== */

:root {
  /* 1. Primary Institutional Blue */
  --color-primary: #0A3872;         /* Primary Institutional Deep Blue */
  --color-primary-hover: #07264E;   /* Deeper Primary Hover */
  --color-deep-blue: #0A3872;       /* Institutional Deep Blue for headers/footers */
  --color-secondary-blue: #0A3872;  /* Secondary references map to Primary Blue */

  /* 2. Sage Green (Accent & Highlights) */
  --color-accent-sage: #6B8E6E;     /* Sage Green Accent */
  --color-accent-sage-hover: #557358;/* Deeper Sage Green for hover */
  --color-accent-sage-light: #E2EBE3;/* Soft Sage tint */
  --color-accent-gold: #6B8E6E;     /* Compatibility alias mapped to Sage Green */
  --color-accent-gold-hover: #557358;
  --color-accent-teal: #6B8E6E;     /* Compatibility alias mapped to Sage Green */
  --color-accent-teal-hover: #557358;
  --color-accent-teal-light: #E2EBE3;
  --color-success: #6B8E6E;
  --color-info: #0A3872;
  --color-warning: #6B8E6E;

  /* 3. Warm Cream (Surfaces & Backgrounds) */
  --color-bg: #F3E9D2;              /* Warm Cream Canvas Background */
  --color-cream: #F3E9D2;           /* Warm Cream Base */
  --color-cream-card: #FAF4E6;      /* Crisp Warm Cream for Elevated Cards */
  --color-cream-light: #FAF4E6;     /* Light content area cream */
  --color-light-blue: #F3E9D2;      /* Alternating sections use Warm Cream */
  --color-ultra-light-blue: #FAF4E6;/* Very soft cream background */
  --color-white: #FAF4E6;           /* Cards & elevated containers use Warm Cream surface */
  --color-pure-white: #FFFFFF;      /* Pure white ONLY for text on dark blue/green */

  /* 4. Borders & Lines */
  --color-border: #DFD3B8;          /* Refined Warm Cream Border */
  --color-border-light: #EBE1CC;    /* Subtle card border */

  /* 5. Typography Colors (Strong Contrast & Readability) */
  --color-text-main: #222222;       /* Dark text for body & paragraphs */
  --color-text-heading: #0A3872;    /* Primary Blue for main headings */
  --color-text-secondary: #333333;  /* High-contrast descriptive dark text */
  --color-text-muted: #555555;      /* Readable metadata text */
  --color-text-on-dark: #FFFFFF;    /* White text on dark blue/green */
  --color-text-cream: #F3E9D2;      /* Cream text on dark blue backgrounds */

  /* Typography Families */
  --font-heading: 'Plus Jakarta Sans', 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

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

  /* Card & Element Radii */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 28px;
  --radius-pill: 50px;
  --radius-full: 9999px;

  /* Shadows tuned for Warm Cream canvas */
  --shadow-xs: 0 2px 4px rgba(10, 56, 114, 0.05);
  --shadow-sm: 0 4px 12px rgba(10, 56, 114, 0.07);
  --shadow-md: 0 10px 30px rgba(10, 56, 114, 0.09);
  --shadow-lg: 0 16px 40px rgba(10, 56, 114, 0.12);
  --shadow-xl: 0 24px 60px rgba(10, 56, 114, 0.16);
  --shadow-card-hover: 0 20px 50px rgba(10, 56, 114, 0.15);

  /* Transitions */
  --transition-fast: 0.2s cubic-bezier(0.23, 1, 0.32, 1);
  --transition-base: 0.35s cubic-bezier(0.23, 1, 0.32, 1);
  --transition-slow: 0.55s cubic-bezier(0.23, 1, 0.32, 1);

  /* Layout */
  --max-width-container: 1240px;
  --max-width-wide: 1380px;
  --topbar-height: 38px;
  --header-height: 80px;
}