/* =============================================================
   Special Learning Design System
   Version: 1.0.0 | Phase 0 | 2026-03-30

   Design tokens, base styles, and accessibility utilities.
   This file defines the system. It does NOT override existing styles.
   Include on every page before sl-components.css.

   Color rule: 60% Warm Cream, 30% Dusty Mauve, 10% Midnight Plum
   Font stack: Mazzard Soft M > Nunito > Quicksand > system
   ============================================================= */

/* ----- @font-face: Mazzard fonts (LIVE) ----- */
@font-face {
  font-family: "Mazzard Soft M";
  src: url("/assets/fonts/mazzard/MazzardSoftM-Light.woff2") format("woff2"),
       url("/assets/fonts/mazzard/MazzardSoftM-Light.woff") format("woff"),
       url("/assets/fonts/mazzard/MazzardSoftM-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Mazzard H";
  src: url("/assets/fonts/mazzard/MazzardH-Medium.woff2") format("woff2"),
       url("/assets/fonts/mazzard/MazzardH-Medium.woff") format("woff"),
       url("/assets/fonts/mazzard/MazzardH-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Mazzard S";
  src: url("/assets/fonts/mazzard/MazzardH-SemiBold.woff2") format("woff2"),
       url("/assets/fonts/mazzard/MazzardH-SemiBold.woff") format("woff"),
       url("/assets/fonts/mazzard/MazzardH-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- Colors: Special Learning palette --- */
  --sl-deep-plum: #5B2E5A;
  --sl-midnight-plum: #3A1539;
  --sl-dusty-mauve: #C4A9B5;
  --sl-warm-cream: #F5F0EB;
  --sl-text-on-dark: #FFFFFF;
  --sl-text-on-dark-muted: rgba(255,255,255,0.8);
  --sl-text-primary: #2D2D2D;
  --sl-text-secondary: #555555;
  --sl-accent-gold: #D4A843;
  --sl-success: #2E7D32;
  --sl-warning: #F59E0B;
  --sl-danger: #DC2626;
  --sl-info: #2563EB;
  --sl-text-muted: #666666;
  --sl-warm-beige: #EDE5DA;
  --sl-border-light: #E8E0E8;
  --sl-bg-light: #FAFAFA;
  --sl-white: #FFFFFF;
  --sl-link: #5B2E5A;
  --sl-link-hover: #3A1539;

  /* Mazzard fonts, when loaded, will automatically take priority in this stack. */
  --sl-font-primary: 'Mazzard Soft M', 'Mazzard H', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --sl-font-heading: 'Mazzard H', 'Mazzard S', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --sl-font-body: 'Quicksand', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* --- Typography: Scale --- */
  --sl-text-xs: 1rem;
  --sl-text-sm: 1.0625rem;
  --sl-text-base: 1.125rem;
  --sl-text-lg: 1.25rem;
  --sl-text-xl: 1.375rem;
  --sl-text-2xl: 1.625rem;
  --sl-text-3xl: 1.75rem;
  --sl-text-4xl: 2.25rem;
  --sl-text-5xl: 3rem;

  /* --- Typography: Weights --- */
  --sl-font-regular: 400;
  --sl-font-medium: 500;
  --sl-font-semibold: 600;
  --sl-font-bold: 700;

  /* --- Typography: Line heights --- */
  --sl-leading-tight: 1.2;
  --sl-leading-normal: 1.5;
  --sl-leading-relaxed: 1.65;

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

  /* --- Borders and Shadows --- */
  --sl-radius-sm: 4px;
  --sl-radius-md: 8px;
  --sl-radius-lg: 12px;
  --sl-radius-xl: 16px;
  --sl-radius-full: 9999px;

  --sl-shadow-sm: 0 1px 3px rgba(91, 46, 90, 0.06);
  --sl-shadow-md: 0 2px 8px rgba(91, 46, 90, 0.08);
  --sl-shadow-lg: 0 4px 16px rgba(91, 46, 90, 0.12);
  --sl-shadow-hover: 0 6px 24px rgba(91, 46, 90, 0.15);

  /* --- Transitions --- */
  --sl-transition-fast: 0.15s ease;
  --sl-transition-base: 0.2s ease;
  --sl-transition-slow: 0.3s ease;

  /* --- Layout --- */
  --sl-max-width: 1200px;
  --sl-nav-height: 72px;
}


/* =============================================================
   BASE STYLES (scoped to .sl-page to avoid conflicts)
   ============================================================= */

.sl-page {
  margin: 0;
  padding: 0;
  font-family: var(--sl-font-body);
  font-size: var(--sl-text-base);
  font-weight: var(--sl-font-regular);
  color: var(--sl-text-primary);
  line-height: var(--sl-leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.sl-page *,
.sl-page *::before,
.sl-page *::after {
  box-sizing: border-box;
}

.sl-page h1,
.sl-page h2,
.sl-page h3,
.sl-page h4,
.sl-page h5,
.sl-page h6 {
  font-family: var(--sl-font-heading);
  font-weight: var(--sl-font-bold);
  line-height: var(--sl-leading-tight);
  color: var(--sl-deep-plum);
  margin-top: 0;
  margin-bottom: var(--sl-space-md);
}

.sl-page h1 { font-size: var(--sl-text-4xl); }
.sl-page h2 { font-size: var(--sl-text-3xl); }
.sl-page h3 { font-size: var(--sl-text-2xl); }
.sl-page h4 { font-size: var(--sl-text-xl); }
.sl-page h5 { font-size: var(--sl-text-lg); }
.sl-page h6 { font-size: var(--sl-text-base); }

.sl-page p {
  margin-top: 0;
  margin-bottom: var(--sl-space-md);
  line-height: var(--sl-leading-normal);
}

.sl-page a {
  color: var(--sl-link);
  text-decoration: none;
  transition: color var(--sl-transition-base);
}

.sl-page a:hover {
  color: var(--sl-link-hover);
  text-decoration: underline;
}

.sl-page img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* --- Container --- */
.sl-container {
  max-width: var(--sl-max-width);
  margin: 0 auto;
  padding: 0 var(--sl-space-lg);
}

/* --- Section spacing --- */
.sl-section {
  padding: var(--sl-space-3xl) 0;
}

.sl-section-lg {
  padding: var(--sl-space-4xl) 0;
}


/* =============================================================
   ACCESSIBILITY
   ============================================================= */

/* Skip to content link */
.sl-skip-link {
  position: absolute;
  top: -100%;
  left: var(--sl-space-md);
  z-index: 10000;
  padding: var(--sl-space-sm) var(--sl-space-md);
  background: var(--sl-midnight-plum);
  color: var(--sl-text-on-dark);
  font-family: var(--sl-font-body);
  font-size: var(--sl-text-sm);
  font-weight: var(--sl-font-semibold);
  border-radius: 0 0 var(--sl-radius-md) var(--sl-radius-md);
  text-decoration: none;
  transition: top var(--sl-transition-fast);
}

.sl-skip-link:focus {
  top: 0;
  outline: none;
}

/* Focus indicators for keyboard navigation */
.sl-page *:focus-visible {
  outline: 3px solid var(--sl-deep-plum);
  outline-offset: 2px;
}

/* Remove focus ring for mouse users */
.sl-page *:focus:not(:focus-visible) {
  outline: none;
}

/* Screen reader only */
.sl-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .sl-page *,
  .sl-page *::before,
  .sl-page *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* =============================================================
   UTILITY CLASSES
   ============================================================= */

/* Text alignment */
.sl-text-center { text-align: center; }
.sl-text-left { text-align: left; }
.sl-text-right { text-align: right; }

/* Text sizes */
.sl-text-xs { font-size: var(--sl-text-xs); }
.sl-text-sm { font-size: var(--sl-text-sm); }
.sl-text-base { font-size: var(--sl-text-base); }
.sl-text-lg { font-size: var(--sl-text-lg); }
.sl-text-xl { font-size: var(--sl-text-xl); }

/* Text colors */
.sl-text-plum { color: var(--sl-deep-plum); }
.sl-text-muted { color: var(--sl-text-muted); }
.sl-text-white { color: var(--sl-text-on-dark); }

/* Background colors */
.sl-bg-cream { background-color: var(--sl-warm-cream); }
.sl-bg-beige { background-color: var(--sl-warm-beige); }
.sl-bg-mauve { background-color: var(--sl-dusty-mauve); }
.sl-bg-plum { background-color: var(--sl-midnight-plum); }
.sl-bg-white { background-color: var(--sl-white); }

/* Spacing helpers */
.sl-mt-0 { margin-top: 0; }
.sl-mb-0 { margin-bottom: 0; }
.sl-mb-sm { margin-bottom: var(--sl-space-sm); }
.sl-mb-md { margin-bottom: var(--sl-space-md); }
.sl-mb-lg { margin-bottom: var(--sl-space-lg); }
.sl-mb-xl { margin-bottom: var(--sl-space-xl); }
.sl-mb-2xl { margin-bottom: var(--sl-space-2xl); }

/* Display */
.sl-flex { display: flex; }
.sl-flex-col { flex-direction: column; }
.sl-flex-wrap { flex-wrap: wrap; }
.sl-items-center { align-items: center; }
.sl-justify-center { justify-content: center; }
.sl-justify-between { justify-content: space-between; }
.sl-gap-sm { gap: var(--sl-space-sm); }
.sl-gap-md { gap: var(--sl-space-md); }
.sl-gap-lg { gap: var(--sl-space-lg); }
.sl-gap-xl { gap: var(--sl-space-xl); }

/* Grid */
.sl-grid {
  display: grid;
  gap: var(--sl-space-lg);
}
.sl-grid-2 { grid-template-columns: repeat(2, 1fr); }
.sl-grid-3 { grid-template-columns: repeat(3, 1fr); }
.sl-grid-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 767px) {
  html, body.sl-page {
    overflow-x: hidden;
    max-width: 100vw;
  }
  .sl-grid-2,
  .sl-grid-3,
  .sl-grid-4 {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .sl-grid-3,
  .sl-grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* =============================================================
   WCAG 2.1 AA ACCESSIBILITY ENHANCEMENTS
   Added: 2026-04-01 | Audit: Full WCAG 2.1 AA compliance pass
   ============================================================= */

/* Global reduced-motion: applies outside .sl-page scope too */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Global focus indicators: catch elements outside .sl-page scope */
*:focus-visible {
  outline: 3px solid var(--sl-deep-plum, #5B2E5A);
  outline-offset: 2px;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--sl-deep-plum, #5B2E5A);
  outline-offset: 2px;
}

/* Ensure interactive elements have minimum touch target size (44x44px) */
.sl-page button,
.sl-page [role="button"],
.sl-page input[type="submit"],
.sl-page input[type="button"] {
  min-height: 44px;
  min-width: 44px;
}

/* High contrast mode support */
@media (forced-colors: active) {
  .sl-skip-link {
    border: 2px solid;
  }
  .sl-page a:focus-visible,
  .sl-page button:focus-visible {
    outline: 3px solid LinkText;
  }
}

/* Accessible color for Dusty Mauve text usage:
   #C4A9B5 on white = 2.28:1 (FAILS AA). Do NOT use for text.
   Use --sl-dusty-mauve-text (#8C6B7D = 4.51:1) when text on white is needed. */
:root {
  --sl-dusty-mauve-text: #8C6B7D;
}

/* Accessible muted text: #595959 on white = 7.0:1 (passes AAA) */
.sl-text-muted-accessible { color: #595959; }