/**
 * Box Planner Light Theme
 *
 * Theme-ready CSS variable system for light mode.
 * Non-themeable properties (fonts, spacing, radius) are in site.css :root
 * This file contains only light theme-specific colors and shadows.
 */

/* ===== Light Theme Colors ===== */
[data-theme="light"],
:root {
  /* Brand Colors */
  --color-brand-primary: #1280C9;
  --color-brand-primary-hover: #0a69a9;
  --color-brand-deep-1: #0F76BB;
  --color-brand-deep-2: #0069C5;
  --color-brand-deep-3: #045b94;

  /* Text Colors */
  --color-text-primary: #091016;
  --color-text-secondary: #5A6977;
  --color-text-tertiary: #9FA4AF;
  --color-text-inverse: #FFFFFF;

  /* Background Colors */
  --color-bg-primary: #FFFFFF;
  --color-bg-secondary: #E9F3FF;
  --color-bg-tertiary: #F4F9FF;
  --color-bg-accent: #A4D4FF;

  /* Border Colors */
  --color-border: rgba(90, 105, 119, 0.15);
  --color-border-solid: #ECECEC;
  --color-border-dark: #5A697726;

  /* Accent Colors */
  --color-accent-orange: #eb5018;
  --color-accent-selection: #eb5018;

  /* Social Media Colors */
  --color-social-facebook: #2F5EBE;
  --color-social-twitter: #01C6E9;
  --color-social-dark: #4A4D54;
  --color-social-pinterest: #CB2027;

  /* Semantic Colors (for states) */
  --color-success: #28A745;
  --color-error: #DC3545;
  --color-warning: #FFC107;
  --color-info: #17A2B8;

  /* Shadows (theme-specific for dark mode adjustment) */
  --shadow-card: 10px 20px 50px rgba(16, 46, 71, 0.12);
  --shadow-card-hover: 10px 25px 60px rgba(16, 46, 71, 0.18);
  --shadow-button: 0 2px 5px 0 rgba(0, 0, 0, 0.1), 0 2px 10px 0 rgba(0, 0, 0, 0.1);
  --shadow-nav: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-focus: 0 0 0 3px rgba(18, 128, 201, 0.1);
}

/* Text selection styling */
::selection {
  color: var(--color-text-inverse);
  background: var(--color-accent-selection);
}

/* Focus states for accessibility */
*:focus-visible {
  outline: 2px solid var(--color-brand-primary);
  outline-offset: 2px;
}