/* ══════════════════════════════════════════════════════════
   VARIABLES.CSS — Design tokens for Buffalo Valley PS
   Colors: Black, White, Orange
   Modes: Light (default) + Dark
   ══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700;800&family=Source+Sans+3:wght@300;400;500;600;700&display=swap');

/* ── Light Mode (default) ─────────────────────────────── */
:root,
[data-theme="light"] {
  /* Brand */
  --bv-orange: #e65c00;
  --bv-orange-hover: #cc5200;
  --bv-orange-light: #fff0e6;
  --bv-orange-subtle: #fef6f0;
  --bv-orange-muted: #f5a360;
  --bv-black: #111111;
  --bv-white: #ffffff;

  /* Backgrounds */
  --color-bg: #fafafa;
  --color-bg-alt: #ffffff;
  --color-bg-elevated: #ffffff;
  --color-bg-hero-gradient: linear-gradient(135deg, #111 0%, #1a1a1a 40%, #222 100%);
  --color-bg-muted: #f3f3f3;

  /* Text */
  --color-text: #111111;
  --color-text-secondary: #555555;
  --color-text-muted: #888888;
  --color-text-on-hero: #ffffff;
  --color-text-on-hero-muted: rgba(255, 255, 255, 0.7);

  /* Borders */
  --color-border: #e2e2e2;
  --color-border-light: #eeeeee;

  /* Accent */
  --color-accent: var(--bv-orange);
  --color-accent-hover: var(--bv-orange-hover);
  --color-accent-bg: var(--bv-orange-light);
  --color-accent-subtle: var(--bv-orange-subtle);

  /* Tags */
  --color-tag-bg: #f0f0f0;
  --color-tag-text: #666666;
  --color-pin: #c0392b;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.10);

  /* Alert Banner */
  --alert-bg: var(--bv-orange);
  --alert-text: #ffffff;

  /* Top Bar */
  --topbar-bg: var(--bv-black);
  --topbar-text: rgba(255, 255, 255, 0.8);

  /* Header */
  --header-bg: var(--bv-white);
  --header-border: var(--bv-orange);

  /* Lunch Menu */
  --menu-day-header-bg: var(--bv-black);
  --menu-day-header-text: var(--bv-white);

  /* Learning Tools */
  --resources-bg: var(--bv-black);
  --resources-text: var(--bv-white);
  --resources-chip-bg: rgba(255, 255, 255, 0.08);
  --resources-chip-border: rgba(255, 255, 255, 0.12);
  --resources-chip-hover: rgba(255, 255, 255, 0.15);
  --resources-muted: rgba(255, 255, 255, 0.6);

  /* Binder Tabs (Staff Directory) */
  --sidebar-text: rgba(255, 255, 255, 0.9);
  --sidebar-text-hover: #ffffff;
  --sidebar-heading: rgba(255, 255, 255, 0.55);
  --sidebar-active-bg: rgba(255, 255, 255, 0.18);
  --sidebar-info-text: rgba(255, 255, 255, 0.8);
  --sidebar-info-strong: #ffffff;
  --tab-bg: linear-gradient(135deg, #e65c00, #d15500);
  --tab-hover-bg: linear-gradient(135deg, #d15500, #bf4e00);
  --tab-active-bg: linear-gradient(135deg, #bf4e00, #a84500);
  --tab-border: rgba(255, 255, 255, 0.15);
  --tab-active-border: rgba(255, 255, 255, 0.25);

  /* Footer */
  --footer-bg: #111111;
  --footer-text: rgba(255, 255, 255, 0.7);
  --footer-heading: #ffffff;
  --footer-link: rgba(255, 255, 255, 0.6);
  --footer-link-hover: var(--bv-orange-muted);
  --footer-border: rgba(255, 255, 255, 0.1);
  --footer-muted: rgba(255, 255, 255, 0.4);

  /* Typography */
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body: 'Source Sans 3', 'Segoe UI', system-ui, sans-serif;

  /* Spacing & Layout */
  --radius: 8px;
  --radius-lg: 12px;
  --max-w: 1200px;
  --transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Dark Mode ────────────────────────────────────────── */
[data-theme="dark"] {
  --bv-orange: #f07020;
  --bv-orange-hover: #e56010;
  --bv-orange-light: #2a1a0e;
  --bv-orange-subtle: #1e1510;
  --bv-orange-muted: #c06020;

  --color-bg: #0e0e0e;
  --color-bg-alt: #161616;
  --color-bg-elevated: #1c1c1c;
  --color-bg-hero-gradient: linear-gradient(135deg, #0a0a0a 0%, #111 40%, #161616 100%);
  --color-bg-muted: #141414;

  --color-text: #e8e8e8;
  --color-text-secondary: #aaaaaa;
  --color-text-muted: #777777;
  --color-text-on-hero: #e8e8e8;
  --color-text-on-hero-muted: rgba(255, 255, 255, 0.55);

  --color-border: #2a2a2a;
  --color-border-light: #222222;

  --color-accent: var(--bv-orange);
  --color-accent-hover: var(--bv-orange-hover);
  --color-accent-bg: var(--bv-orange-light);
  --color-accent-subtle: var(--bv-orange-subtle);

  --color-tag-bg: #252525;
  --color-tag-text: #999999;
  --color-pin: #e74c3c;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.5);

  --alert-bg: var(--bv-orange);
  --alert-text: #ffffff;
  --topbar-bg: #050505;
  --topbar-text: rgba(255, 255, 255, 0.65);
  --header-bg: #141414;
  --header-border: var(--bv-orange);

  --menu-day-header-bg: var(--bv-orange);
  --menu-day-header-text: #ffffff;

  --resources-bg: #0a0a0a;
  --resources-text: #e8e8e8;
  --resources-chip-bg: rgba(255, 255, 255, 0.06);
  --resources-chip-border: rgba(255, 255, 255, 0.1);
  --resources-chip-hover: rgba(255, 255, 255, 0.12);
  --resources-muted: rgba(255, 255, 255, 0.45);

  --sidebar-text: rgba(255, 255, 255, 0.85);
  --sidebar-text-hover: #ffffff;
  --sidebar-heading: rgba(255, 255, 255, 0.45);
  --sidebar-active-bg: rgba(255, 255, 255, 0.14);
  --sidebar-info-text: rgba(255, 255, 255, 0.7);
  --sidebar-info-strong: rgba(255, 255, 255, 0.9);
  --tab-bg: linear-gradient(135deg, #8a3d00, #753300);
  --tab-hover-bg: linear-gradient(135deg, #a04800, #8a3d00);
  --tab-active-bg: linear-gradient(135deg, #a04800, #8a3d00);
  --tab-border: rgba(255, 255, 255, 0.1);
  --tab-active-border: rgba(255, 255, 255, 0.2);

  --footer-bg: #050505;
  --footer-text: rgba(255, 255, 255, 0.55);
  --footer-heading: #e8e8e8;
  --footer-link: rgba(255, 255, 255, 0.5);
  --footer-link-hover: var(--bv-orange);
  --footer-border: rgba(255, 255, 255, 0.08);
  --footer-muted: rgba(255, 255, 255, 0.3);
}

/* ── Base Reset ───────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
  transition: background 0.35s ease, color 0.35s ease;
  min-height: 100vh;
}

a { color: inherit; }

/* ── Accessibility ────────────────────────────────────── */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}