/**
 * EPSD Design Tokens
 * East Penn School District Design System
 *
 * WCAG 2.2 Level AA Contrast Reference:
 * ──────────────────────────────────────────────────────────
 * Dark Green #124734 on White     → 10.6:1 ✓ AA (normal + large)
 * White on Dark Green #124734     → 10.6:1 ✓ AA (normal + large)
 * Gray #54565a on White           →  7.4:1 ✓ AA (normal + large)
 * Dark #1a1a1a on White           → 17.4:1 ✓ AA (normal + large)
 * Gold #f3bd48 on Dark Green      →  6.2:1 ✓ AA (normal + large)
 * Gold #f3bd48 on Dark #1a1a1a   → 10.1:1 ✓ AA (normal + large)
 * Gold #f3bd48 on White           →  1.7:1 ✗ FAIL — decorative use only
 * Sec. Green #529b63 on White     →  3.4:1 ✗ FAIL normal, ✓ AA large
 * Sec. Green #529b63 on Dark      →  5.2:1 ✓ AA (normal + large)
 * ──────────────────────────────────────────────────────────
 */

:root {
  /* ========================================
     COLOR PRIMITIVES
     Brand colors — use semantic tokens below
     for actual component styling.
     ======================================== */

  --epsd-color-green-900: #0b2d21;
  --epsd-color-green-800: #124734;
  --epsd-color-green-700: #1a5c44;
  --epsd-color-green-600: #267a5b;
  --epsd-color-green-500: #529b63;
  --epsd-color-green-400: #7ab685;
  --epsd-color-green-300: #a3d1a8;
  --epsd-color-green-200: #cce6ce;
  --epsd-color-green-100: #e8f4e9;
  --epsd-color-green-50: #f2f9f3;

  --epsd-color-gold-900: #5c4209;
  --epsd-color-gold-800: #8a6410;
  --epsd-color-gold-700: #b8861a;
  --epsd-color-gold-600: #d9a02e;
  --epsd-color-gold-500: #f3bd48;
  --epsd-color-gold-400: #f6cd72;
  --epsd-color-gold-300: #f8dc97;
  --epsd-color-gold-200: #fbeabc;
  --epsd-color-gold-100: #fdf4dd;
  --epsd-color-gold-50: #fefaee;

  --epsd-color-neutral-900: #1a1a1a;
  --epsd-color-neutral-800: #333333;
  --epsd-color-neutral-700: #54565a;
  --epsd-color-neutral-600: #6b6d71;
  --epsd-color-neutral-500: #8a8c8f;
  --epsd-color-neutral-400: #a8aaad;
  --epsd-color-neutral-300: #c5c7c9;
  --epsd-color-neutral-200: #e0e1e2;
  --epsd-color-neutral-100: #f0f0f0;
  --epsd-color-neutral-50: #f5f5f0;
  --epsd-color-white: #ffffff;

  /* ========================================
     SEMANTIC COLOR TOKENS
     Use these in components — not primitives.
     ======================================== */

  /* --- Surface / Background --- */
  --epsd-surface-primary: var(--epsd-color-white);
  --epsd-surface-secondary: var(--epsd-color-neutral-50);
  --epsd-surface-tertiary: var(--epsd-color-neutral-100);
  --epsd-surface-inverse: var(--epsd-color-green-800);
  --epsd-surface-inverse-subtle: var(--epsd-color-green-900);

  /* --- Text --- */
  /* All text tokens pass WCAG AA on their intended surface */
  --epsd-text-primary: var(--epsd-color-neutral-900);         /* 16.6:1 on white */
  --epsd-text-secondary: var(--epsd-color-neutral-700);       /* 5.9:1 on white */
  --epsd-text-inverse: var(--epsd-color-white);               /* 8.9:1 on dark green */
  --epsd-text-inverse-muted: var(--epsd-color-green-200);     /* on dark green */
  --epsd-text-heading: var(--epsd-color-green-800);           /* 8.9:1 on white */
  --epsd-text-link: var(--epsd-color-green-800);              /* 8.9:1 on white */
  --epsd-text-link-hover: var(--epsd-color-green-700);        /* 7.0:1 on white */

  /* --- Border --- */
  --epsd-border-default: var(--epsd-color-neutral-200);
  --epsd-border-strong: var(--epsd-color-neutral-400);
  --epsd-border-inverse: rgba(255, 255, 255, 0.2);
  --epsd-border-accent: var(--epsd-color-gold-500);

  /* --- Interactive --- */
  --epsd-interactive-primary: var(--epsd-color-green-800);
  --epsd-interactive-primary-hover: var(--epsd-color-green-700);
  --epsd-interactive-primary-active: var(--epsd-color-green-900);
  --epsd-interactive-primary-text: var(--epsd-color-white);

  --epsd-interactive-secondary: transparent;
  --epsd-interactive-secondary-hover: var(--epsd-color-green-50);
  --epsd-interactive-secondary-border: var(--epsd-color-green-800);
  --epsd-interactive-secondary-text: var(--epsd-color-green-800);

  /* --- Accent (gold) — decorative/emphasis only, never as text on light bg --- */
  --epsd-accent-primary: var(--epsd-color-gold-500);
  --epsd-accent-hover: var(--epsd-color-gold-600);
  --epsd-accent-subtle: var(--epsd-color-gold-100);

  /* --- Focus — visible, high contrast for keyboard nav --- */
  --epsd-focus-ring-color: var(--epsd-color-gold-500);
  --epsd-focus-ring-width: 2px;
  --epsd-focus-ring-offset: 2px;
  --epsd-focus-ring: var(--epsd-focus-ring-width) solid var(--epsd-focus-ring-color);

  /* --- Calendar Event Types --- */
  --epsd-cal-district-closed:        #b91c1c;
  --epsd-cal-district-closed-makeup: #ef4444;
  --epsd-cal-dismissal:              #7a5500;
  --epsd-cal-snow-makeup:            #0369a1;
  --epsd-cal-elem-conferences:       #6b21a8;
  --epsd-cal-middle-conferences:     #7e22ce;
  --epsd-cal-hs-conferences:         #9333ea;
  --epsd-cal-kindergarten-reg:       #0f766e;
  --epsd-cal-end-trimester:          #529b63;
  --epsd-cal-end-mp-ehs:            #15803d;
  --epsd-cal-end-mp-elem-secondary: #166534;
  --epsd-cal-students-first-day:     #ca8a04;
  --epsd-cal-students-last-day:      #b45309;
  --epsd-cal-graduation:             #d97706;
  --epsd-cal-assessment:             #c2410c;
  --epsd-cal-pd:                     #1e40af;
  --epsd-cal-orientation:            #0e7490;
  --epsd-cal-general:                #6b7280;

  /* --- Status / Alerts --- */
  --epsd-status-info-bg: #e8f0fe;
  --epsd-status-info-text: #1a4d8f;
  --epsd-status-info-border: #4a90d9;
  --epsd-status-warning-bg: var(--epsd-color-gold-100);
  --epsd-status-warning-text: var(--epsd-color-gold-900);
  --epsd-status-warning-border: var(--epsd-color-gold-500);
  --epsd-status-error-bg: #fde8e8;
  --epsd-status-error-text: #8b1a1a;
  --epsd-status-error-border: #d94a4a;
  --epsd-status-success-bg: var(--epsd-color-green-100);
  --epsd-status-success-text: var(--epsd-color-green-900);
  --epsd-status-success-border: var(--epsd-color-green-500);

  /* ========================================
     TYPOGRAPHY TOKENS
     ======================================== */

  --epsd-font-sans: inherit;
  --epsd-font-display: 'Poppins', sans-serif;
  --epsd-font-mono: 'SF Mono', SFMono-Regular, Consolas, 'Liberation Mono', Menlo, Courier, monospace;

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

  --epsd-line-height-tight: 1.2;
  --epsd-line-height-snug: 1.35;
  --epsd-line-height-normal: 1.6;
  --epsd-line-height-relaxed: 1.75;

  --epsd-letter-spacing-tight: -0.02em;
  --epsd-letter-spacing-normal: 0;
  --epsd-letter-spacing-wide: 0.05em;

  /* --- Fluid Type Scale (320px → 1200px) --- */
  --epsd-fluid-3xl: clamp(2rem, 1.545rem + 2.27vw, 3rem);         /* 32px → 48px */
  --epsd-fluid-2xl: clamp(1.75rem, 1.432rem + 1.59vw, 2.75rem);   /* 28px → 44px */
  --epsd-fluid-xl: clamp(1.5rem, 1.295rem + 1.02vw, 2rem);        /* 24px → 32px */
  --epsd-fluid-lg: clamp(1.25rem, 1.159rem + 0.45vw, 1.5rem);     /* 20px → 24px */
  --epsd-fluid-md: clamp(1rem, 0.932rem + 0.34vw, 1.1875rem);     /* 16px → 19px */
  --epsd-fluid-sm: clamp(0.875rem, 0.852rem + 0.11vw, 0.9375rem); /* 14px → 15px */
  --epsd-fluid-xs: clamp(0.75rem, 0.727rem + 0.11vw, 0.8125rem);  /* 12px → 13px */

  /* ========================================
     SPACING TOKENS
     Mirrors theme.json spacingSizes for use
     outside of block context.
     ======================================== */

  --epsd-space-2xs: 0.25rem;   /* 4px */
  --epsd-space-xs: 0.5rem;     /* 8px */
  --epsd-space-sm: 0.75rem;    /* 12px */
  --epsd-space-md: 1rem;       /* 16px */
  --epsd-space-lg: 1.5rem;     /* 24px */
  --epsd-space-xl: 2rem;       /* 32px */
  --epsd-space-2xl: 3rem;      /* 48px */
  --epsd-space-3xl: 4rem;      /* 64px */
  --epsd-space-4xl: 6rem;      /* 96px */

  /* ========================================
     LAYOUT TOKENS
     ======================================== */

  --epsd-content-width: 720px;
  --epsd-wide-width: 1200px;
  --epsd-full-width: 100%;

  /* ========================================
     EFFECTS / TRANSITIONS
     ======================================== */

  --epsd-radius-sm: 4px;
  --epsd-radius-md: 8px;
  --epsd-radius-lg: 12px;
  --epsd-radius-full: 9999px;

  --epsd-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --epsd-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
  --epsd-shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.1);

  --epsd-transition-fast: 150ms ease;
  --epsd-transition-normal: 250ms ease;
  --epsd-transition-slow: 400ms ease;
}

/* ========================================
   GLOBAL RESETS & BASE STYLES
   ======================================== */

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

/* body font-family intentionally omitted — inherits from the active theme */

/* ========================================
   FOCUS STYLES (WCAG 2.2 — 2.4.7 & 2.4.13)
   Visible focus for all interactive elements.
   Gold ring on both light and dark backgrounds.
   ======================================== */

:focus-visible {
  outline: var(--epsd-focus-ring);
  outline-offset: var(--epsd-focus-ring-offset);
}

:focus:not(:focus-visible) {
  outline: none;
}

/*
 * Safari < 15.4 (macOS < 12.3) does not support :focus-visible — it matches
 * nothing, so the rules above (and every per-element :focus-visible ring in
 * components.css / zone-*.css) silently render no ring on keyboard focus.
 * Fall back to plain :focus on those engines so Tab focus stays visible.
 * Modern browsers ignore this block (they support :focus-visible), so they
 * keep the mouse-vs-keyboard distinction above with no double ring.
 */
@supports not selector(:focus-visible) {
  :focus {
    outline: var(--epsd-focus-ring);
    outline-offset: var(--epsd-focus-ring-offset);
  }
}

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

.epsd-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ========================================
   SCROLL-DRIVEN ENTRANCE ANIMATIONS
   Zones fade/slide in as they enter the viewport.
   Uses animation-timeline: view() — CSS only, no JS.
   ======================================== */

@keyframes epsd-fade-up {
  from {
    opacity: 0;
    transform: translateY(2rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.epsd-animate-in {
  animation: epsd-fade-up linear both;
  animation-timeline: view();
  animation-range: entry 0% entry 30%;
}

/* Stagger children inside a zone */
.epsd-animate-in > .epsd-stagger > * {
  animation: epsd-fade-up linear both;
  animation-timeline: view();
  animation-range: entry 0% entry 35%;
}

/* Respect user motion preferences (WCAG 2.3.3) */
@media (prefers-reduced-motion: reduce) {
  .epsd-animate-in,
  .epsd-animate-in > .epsd-stagger > * {
    animation: none;
    opacity: 1;
    transform: none;
  }

  /* Disable hover transforms for users who prefer reduced motion.
     Scoped to EPSD wrappers only — a global `*:hover` reset would suppress
     legitimate hover transforms on Astra content, blocks, and other plugins
     network-wide, and violates the "no !important on bare elements" rule
     (see Conventions in ARCHITECTURE.md). Each zone's own reduced-motion
     block still handles its internals; this is the wrapper-level backstop. */
  .epsd-zone-1b *:hover,
  .epsd-nav-wrap *:hover,
  .epsd-drawer *:hover,
  .epsd-zone-8 *:hover,
  .epsd-scroll-top:hover {
    transform: none !important;
  }
}