/**
 * Advent Calendar Design System
 * CSS Custom Properties (Variables)
 *
 * Based on design analysis from: https://caspianalmerud.netlify.app/
 * Adapted from technical/terminal aesthetic to romantic/festive theme
 *
 * See: instructions/ui-design.md and instructions/design-extraction.md
 */

:root {
  /* ============================================
     COLOR PALETTE
     ============================================ */

  /* Backgrounds */
  --color-bg-primary: #1a1a1a;        /* Deep charcoal - softer than pure black */
  --color-bg-secondary: #2d2d2d;      /* Lighter charcoal - cards, elevated elements */
  --color-bg-elevated: #3a3a3a;       /* Modals, overlays */

  /* Accent Colors - Warm romantic tones */
  --color-accent-primary: #d4a574;    /* Warm gold - main interactive elements */
  --color-accent-secondary: #c77d6a;  /* Dusty rose - secondary highlights */
  --color-accent-tertiary: #8b6f47;   /* Bronze - subtle accents */

  /* Festive Colors (Christmas theme) */
  --color-festive-red: #c74b50;       /* Muted red - not garish */
  --color-festive-green: #7a9e7e;     /* Sage green - sophisticated */
  --color-festive-gold: #d4a574;      /* Same as primary accent */

  /* Text Colors */
  --color-text-primary: #f5f5f5;      /* Almost white - main text */
  --color-text-secondary: #b8b8b8;    /* Muted gray - secondary text */
  --color-text-muted: #808080;        /* Darker gray - least important text */
  --color-text-on-accent: #1a1a1a;    /* Dark text on light accent backgrounds */

  /* State Colors */
  --color-success: #7a9e7e;           /* Sage green - completed, correct */
  --color-error: #c74b50;             /* Muted red - errors, warnings */
  --color-warning: #d4a574;           /* Gold - attention needed */
  --color-locked: #4a4a4a;            /* Grayed out - disabled/locked states */
  --color-hover: #e5b885;             /* Lighter gold - hover highlights */

  /* Overlays & Shadows */
  --color-overlay: rgba(0, 0, 0, 0.8);            /* Full-screen overlays */
  --color-modal-bg: rgba(45, 45, 45, 0.95);       /* Modal backgrounds */
  --shadow-color: rgba(0, 0, 0, 0.3);             /* Shadow tint */
  --glow-color: rgba(212, 165, 116, 0.4);         /* Glow effect (primary accent) */


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

  /* Font Families */
  --font-display: 'Playfair Display', 'Georgia', serif;      /* Elegant, romantic - headings */
  --font-body: 'Inter', 'Helvetica Neue', sans-serif;        /* Clean, readable - body */
  --font-mono: 'JetBrains Mono', 'Consolas', monospace;      /* Code challenges */

  /* Font Sizes */
  --text-xs: 0.75rem;      /* 12px - captions, small notes */
  --text-sm: 0.875rem;     /* 14px - secondary text */
  --text-base: 1rem;       /* 16px - body text */
  --text-lg: 1.125rem;     /* 18px - large body, story text */
  --text-xl: 1.25rem;      /* 20px - small headings */
  --text-2xl: 1.5rem;      /* 24px - medium headings */
  --text-3xl: 1.875rem;    /* 30px - large headings */
  --text-4xl: 2.25rem;     /* 36px - hero text */
  --text-5xl: 3rem;        /* 48px - display text */

  /* Font Weights */
  --font-light: 300;
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;

  /* Line Heights */
  --leading-tight: 1.25;      /* Compact text */
  --leading-normal: 1.5;      /* Default body text */
  --leading-relaxed: 1.75;    /* Story text, generous reading space */

  /* Letter Spacing */
  --tracking-tight: -0.025em;
  --tracking-normal: 0;
  --tracking-wide: 0.05em;    /* Buttons, uppercase headings */


  /* ============================================
     SPACING & LAYOUT
     ============================================ */

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

  /* Container Max Widths */
  --container-sm: 640px;      /* Small content (login form) */
  --container-md: 768px;      /* Story text */
  --container-lg: 1024px;     /* Game areas */
  --container-xl: 1280px;     /* Calendar grid */

  /* Border Radius */
  --radius-sm: 4px;           /* Subtle rounding */
  --radius-md: 8px;           /* Standard buttons, cards */
  --radius-lg: 12px;          /* Larger cards, modals */
  --radius-xl: 16px;          /* Hero elements */
  --radius-full: 9999px;      /* Circular/pill shapes */


  /* ============================================
     VISUAL EFFECTS
     ============================================ */

  /* Transitions */
  --transition-fast: 150ms ease;      /* Quick feedback */
  --transition-base: 200ms ease;      /* Standard interactions */
  --transition-slow: 300ms ease;      /* Deliberate animations */

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 var(--shadow-color);
  --shadow-md: 0 4px 6px -1px var(--shadow-color);
  --shadow-lg: 0 10px 15px -3px var(--shadow-color);
  --shadow-xl: 0 20px 25px -5px var(--shadow-color);

  /* Glows (for interactive elements) */
  --glow-sm: 0 0 5px var(--glow-color);
  --glow-md: 0 0 10px var(--glow-color);
  --glow-lg: 0 0 20px var(--glow-color);


  /* ============================================
     COMPONENT-SPECIFIC
     ============================================ */

  /* Borders - 90's chunky style */
  --border-width: 2px;
  --border-width-thick: 4px;
  --border-color: #505050;
  --border-color-light: #606060;
  --border-color-dark: #202020;
  --border-color-accent: var(--color-accent-primary);

  /* Beveled 3D effect - adjusted for dark theme */
  --bevel-highlight: #505050;
  --bevel-shadow: #252525;
  --bevel-dark-shadow: #0a0a0a;

  /* Focus Outline */
  --focus-outline: 2px solid var(--color-accent-primary);
  --focus-outline-offset: 2px;

  /* Z-Index Scale */
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-tooltip: 500;
}


/* ============================================
   RESPONSIVE BREAKPOINTS
   (For reference - use in media queries)
   ============================================ */

/*
  Mobile: < 768px (not supported - show desktop-only message)
  Tablet: 768px - 1023px (minimal support)
  Desktop: 1024px - 1439px (primary target)
  Large Desktop: 1440px+ (enhanced spacing)
*/


/* ============================================
   USAGE EXAMPLES
   ============================================ */

/*
// Example: Button with accent color
.btn-primary {
  background-color: var(--color-accent-primary);
  color: var(--color-text-on-accent);
  padding: var(--space-md) var(--space-xl);
  border-radius: var(--radius-md);
  font-weight: var(--font-semibold);
  letter-spacing: var(--tracking-wide);
  transition: all var(--transition-base);
}

.btn-primary:hover {
  background-color: var(--color-hover);
  box-shadow: var(--glow-md);
}

// Example: Story text container
.story-text {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-text-primary);
  max-width: var(--container-md);
  padding: var(--space-2xl);
}

// Example: Day card on calendar
.day-card {
  background-color: var(--color-bg-secondary);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  transition: all var(--transition-base);
}

.day-card:hover {
  border-color: var(--border-color-accent);
  box-shadow: var(--glow-sm);
  transform: translateY(-2px);
}

.day-card.locked {
  background-color: var(--color-locked);
  opacity: 0.5;
  cursor: not-allowed;
}
*/