/* ==========================================================================
   PMHS Teacher Clock & Period Timer - Design System & Global Styles
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700;800&family=Inter:wght@400;500;600&family=Orbitron:wght@500;700;800;900&family=VT323&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,600;1,700&family=Cinzel:wght@500;600;700;800&family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

/* Vintage 7-Segment and 14-Segment Digital Clock Fonts */
@font-face {
  font-family: 'DSEG14-Classic';
  src: url('https://cdn.jsdelivr.net/npm/dseg@0.46.0/fonts/DSEG14-Classic/DSEG14Classic-Bold.woff2') format('woff2');
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: 'DSEG14-Classic';
  src: url('https://cdn.jsdelivr.net/npm/dseg@0.46.0/fonts/DSEG14-Classic/DSEG14Classic-Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'DSEG7-Classic';
  src: url('https://cdn.jsdelivr.net/npm/dseg@0.46.0/fonts/DSEG7-Classic/DSEG7Classic-Bold.woff2') format('woff2');
  font-weight: bold;
  font-style: normal;
}

:root {
  /* Color System - Pelham Dark Blue & Radiant Gold (Default Theme) */
  --bg-primary: #060e20;          /* Deep rich Pelham navy night */
  --bg-secondary: #0c1a38;        /* Midnight navy card/surface */
  --bg-tertiary: #13264d;         /* Elevated navy surface */
  --bg-card: rgba(11, 23, 49, 0.85);
  --bg-card-hover: rgba(17, 34, 71, 0.94);
  --bg-glass: rgba(9, 19, 41, 0.82);
  --bg-glass-border: rgba(245, 197, 66, 0.22); /* Radiant gold sheen on borders */

  --text-primary: #ffffff;
  --text-secondary: #cbd5e1;
  --text-muted: #8493a8;
  --text-accent: #f5c542;         /* Luminous Pelham Gold */

  /* State & Accent Colors */
  --accent-gold: #f5c542;
  --accent-gold-light: #fef08a;
  --accent-gold-dark: #b45309;
  --accent-blue: #2563eb;
  --accent-blue-light: #60a5fa;
  --accent-emerald: #10b981;
  --accent-amber: #f59e0b;
  --accent-rose: #f43f5e;
  --accent-purple: #818cf8;

  /* Progress Bar: Deep Pelham Blue to Radiant Gold */
  --bar-primary: linear-gradient(90deg, #1d4ed8 0%, #3b82f6 35%, #eab308 75%, #fde047 100%);
  --bar-warning: linear-gradient(90deg, #d97706 0%, #f59e0b 50%, #fef08a 100%);
  --bar-urgent: linear-gradient(90deg, #dc2626 0%, #ef4444 60%, #fca5a5 100%);
  --bar-passing: linear-gradient(90deg, #4338ca 0%, #6366f1 50%, #93c5fd 100%);

  --glow-gold: 0 0 35px rgba(245, 197, 66, 0.45);
  --glow-blue: 0 0 35px rgba(37, 99, 235, 0.45);
  --glow-amber: 0 0 35px rgba(245, 158, 11, 0.5);
  --glow-rose: 0 0 45px rgba(244, 63, 94, 0.6);
  --glow-passing: 0 0 35px rgba(99, 102, 241, 0.45);

  /* Typography */
  --font-display: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Radii & Shadows */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 32px;
  --radius-full: 9999px;

  --shadow-card: 0 10px 30px -10px rgba(0, 0, 0, 0.65), 0 0 1px 1px var(--bg-glass-border);
  --shadow-elevated: 0 20px 45px -12px rgba(0, 0, 0, 0.8), 0 0 1px 1px var(--bg-glass-border), 0 0 30px rgba(245, 197, 66, 0.08);

  /* Layout */
  --header-height: 72px;
  --transition-speed: 0.25s;
}

/* Pelham Dark Blue & Gold Theme (Default) */
body[data-theme='dark'],
body[data-theme='blue-gold'] {
  --bg-primary: #060e20;
  --bg-secondary: #0c1a38;
  --bg-tertiary: #13264d;
  --bg-card: rgba(11, 23, 49, 0.85);
  --bg-card-hover: rgba(17, 34, 71, 0.94);
  --bg-glass: rgba(9, 19, 41, 0.82);
  --bg-glass-border: rgba(245, 197, 66, 0.22);

  --text-primary: #ffffff;
  --text-secondary: #cbd5e1;
  --text-muted: #8493a8;
  --text-accent: #f5c542;

  --accent-gold: #f5c542;
  --accent-gold-light: #fef08a;
  --bar-primary: linear-gradient(90deg, #1d4ed8 0%, #3b82f6 35%, #eab308 75%, #fde047 100%);
  --glow-gold: 0 0 35px rgba(245, 197, 66, 0.45);
}

/* Light Classroom Mode */
body[data-theme='light'] {
  --bg-primary: #f1f5f9;
  --bg-secondary: #ffffff;
  --bg-tertiary: #e2e8f0;
  --bg-card: rgba(255, 255, 255, 0.85);
  --bg-card-hover: rgba(248, 250, 252, 0.95);
  --bg-glass: rgba(255, 255, 255, 0.8);
  --bg-glass-border: rgba(0, 0, 0, 0.08);

  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-muted: #94a3b8;
  --text-accent: #0284c7;

  --bar-primary: linear-gradient(90deg, #0284c7 0%, #0ea5e9 50%, #10b981 100%);
  --shadow-card: 0 10px 25px -5px rgba(0, 0, 0, 0.08), 0 0 1px 1px rgba(0, 0, 0, 0.05);
}

/* High Contrast Projector Mode (Blackout & Vivid High-Luminance Colors) */
body[data-theme='high-contrast'] {
  --bg-primary: #000000;
  --bg-secondary: #050505;
  --bg-tertiary: #111111;
  --bg-card: #0a0a0a;
  --bg-card-hover: #151515;
  --bg-glass: #000000;
  --bg-glass-border: #333333;

  --text-primary: #ffffff;
  --text-secondary: #e2e8f0;
  --text-muted: #94a3b8;
  --text-accent: #00f2fe;

  --bar-primary: linear-gradient(90deg, #00f2fe 0%, #4facfe 100%);
  --bar-warning: linear-gradient(90deg, #f6d365 0%, #fda085 100%);
  --bar-urgent: linear-gradient(90deg, #ff0844 0%, #ffb199 100%);
  --bar-passing: linear-gradient(90deg, #b224ef 0%, #7579ff 100%);

  --shadow-card: 0 0 0 2px #444444;
}

/* Lindz Theme (Retro Green Digital Clock on Pitch Black) */
body[data-theme='lindz'] {
  --bg-primary: #000000;
  --bg-secondary: #060e06;
  --bg-tertiary: #0c180c;
  --bg-card: rgba(6, 15, 6, 0.92);
  --bg-card-hover: rgba(10, 24, 10, 0.96);
  --bg-glass: rgba(0, 0, 0, 0.92);
  --bg-glass-border: rgba(34, 197, 94, 0.35);

  --text-primary: #39ff14;
  --text-secondary: #86efac;
  --text-muted: #16a34a;
  --text-accent: #22c55e;

  --accent-gold: #22c55e;
  --accent-gold-light: #86efac;
  --accent-gold-dark: #14532d;
  --accent-blue: #16a34a;
  --accent-amber: #eab308;
  --accent-rose: #ef4444;

  --bar-primary: linear-gradient(90deg, #14532d 0%, #16a34a 35%, #22c55e 75%, #86efac 100%);
  --bar-warning: linear-gradient(90deg, #854d0e 0%, #eab308 60%, #fef08a 100%);
  --bar-urgent: linear-gradient(90deg, #991b1b 0%, #ef4444 60%, #fca5a5 100%);
  --bar-passing: linear-gradient(90deg, #15803d 0%, #34d399 50%, #bbf7d0 100%);

  --glow-gold: 0 0 35px rgba(34, 197, 94, 0.55);
  --shadow-card: 0 10px 30px -10px rgba(0, 0, 0, 0.9), 0 0 1px 1px var(--bg-glass-border);
  --shadow-elevated: 0 20px 45px -12px rgba(0, 0, 0, 0.95), 0 0 1px 1px var(--bg-glass-border), 0 0 35px rgba(34, 197, 94, 0.15);
}

/* Torts Theme (Oxford Navy with Emerald Green & Royal Purple Accents, Elegant Serif) */
body[data-theme='torts'] {
  --bg-primary: #081026;          /* Deep rich Oxford navy night */
  --bg-secondary: #0e1b3d;        /* Midnight sapphire navy card/surface */
  --bg-tertiary: #162754;         /* Elevated navy slate */
  --bg-card: rgba(12, 23, 53, 0.88);
  --bg-card-hover: rgba(18, 33, 74, 0.95);
  --bg-glass: rgba(10, 19, 44, 0.86);
  --bg-glass-border: rgba(168, 85, 247, 0.28); /* Radiant royal purple sheen */

  --text-primary: #ffffff;
  --text-secondary: #cbd5e1;
  --text-muted: #8da0be;
  --text-accent: #34d399;         /* Luminous emerald green */

  /* State & Accent Colors: Emerald Green & Royal Purple */
  --accent-gold: #34d399;         /* Emerald accent mapped to primary theme highlights */
  --accent-gold-light: #6ee7b7;   /* Light mint/emerald */
  --accent-gold-dark: #059669;    /* Deep forest emerald */
  --accent-blue: #818cf8;
  --accent-blue-light: #a5b4fc;
  --accent-emerald: #10b981;
  --accent-purple: #c084fc;       /* Regal amethyst / royal purple */
  --accent-purple-light: #e9d5ff;
  --accent-amber: #fbbf24;
  --accent-rose: #fb7185;

  /* Typography: Elegant Serif Font */
  --font-display: 'Playfair Display', 'Cinzel', Georgia, serif;
  --font-body: 'Lora', 'Playfair Display', Georgia, serif;

  /* Progress Bar: Deep Emerald Green flowing into Royal Purple */
  --bar-primary: linear-gradient(90deg, #059669 0%, #10b981 35%, #8b5cf6 75%, #c084fc 100%);
  --bar-warning: linear-gradient(90deg, #d97706 0%, #f59e0b 50%, #fef08a 100%);
  --bar-urgent: linear-gradient(90deg, #dc2626 0%, #ef4444 60%, #fca5a5 100%);
  --bar-passing: linear-gradient(90deg, #7c3aed 0%, #a855f7 50%, #34d399 100%);

  --glow-gold: 0 0 35px rgba(52, 211, 153, 0.45);
  --glow-blue: 0 0 35px rgba(139, 92, 246, 0.45);
  --glow-amber: 0 0 35px rgba(245, 158, 11, 0.5);
  --glow-rose: 0 0 45px rgba(251, 113, 133, 0.6);
  --glow-passing: 0 0 35px rgba(168, 85, 247, 0.5);

  --shadow-card: 0 10px 30px -10px rgba(0, 0, 0, 0.75), 0 0 1px 1px var(--bg-glass-border);
  --shadow-elevated: 0 20px 45px -12px rgba(0, 0, 0, 0.85), 0 0 1px 1px var(--bg-glass-border), 0 0 35px rgba(168, 85, 247, 0.16);
}

/* Base Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  min-height: 100vh;
  font-family: var(--font-body);
  background-color: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Tabular numbers for clocks to eliminate layout shifts */
.tabular-nums {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
}

/* Responsive Container */
.app-container {
  max-width: 1360px;
  margin: 0 auto;
  padding: 1.25rem 1.5rem 3rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Scrollbar Styling */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--bg-primary);
}

::-webkit-scrollbar-thumb {
  background: var(--bg-tertiary);
  border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}