/**
 * Light Theme — The Doctor Agency ERP (MEGA-BUNDLE 3, Task 3.3)
 *
 * Cream + Charcoal + Matte Gold. Dignified, not flat. Meets WCAG AA.
 * Activated via `:root[data-theme="light"]` so the existing `applyTheme()`
 * in index.html can switch instantly.
 *
 * BONUSES included inline:
 *   B1 Print-optimized  — auto-applied via @media print
 *   B2 High-contrast    — data-theme="light-hc" (AAA)
 *   B4 Smooth transition tokens — defined here; Task 3.7 consumes them
 */

:root[data-theme="light"] {
  /* Surfaces */
  --color-bg:                  #FAF9F6;   /* cream, warm white */
  --color-surface:             #FFFFFF;
  --color-surface-elevated:    #F5F4F0;
  --color-surface-alt:         #F0EEE8;
  --color-overlay:             rgba(250, 249, 246, 0.86);

  /* Text */
  --color-text-primary:        #1E293B;   /* deep charcoal */
  --color-text-secondary:      #475569;
  --color-text-muted:          #64748B;
  --color-text-on-accent:      #1a1308;

  /* Accents */
  --color-accent:              #B8941F;   /* matte gold — darker for contrast on cream */
  --color-accent-strong:       #8F7118;
  --color-accent-muted:        #E9DDA8;
  --color-accent-contrast:     #FFFFFF;

  /* Semantic */
  --color-success:             #0E8A5F;
  --color-warning:             #B45309;
  --color-danger:              #BC2A3A;
  --color-info:                #1D4ED8;

  /* Borders */
  --color-border:              #E2E8F0;
  --color-border-strong:       #CBD5E1;
  --color-divider:             #EDEAE1;

  /* Shadows — soft, WARM cream undertones */
  --shadow-xs:  0 1px 2px rgba(30, 41, 59, 0.04);
  --shadow-sm:  0 2px 6px rgba(30, 41, 59, 0.06);
  --shadow-md:  0 6px 18px rgba(30, 41, 59, 0.08);
  --shadow-lg:  0 18px 48px rgba(30, 41, 59, 0.10);

  /* Brand-facing aliases (compat with existing code that uses --brand-*) */
  --brand-primary:             var(--color-accent);
  --brand-secondary:           var(--color-surface-elevated);
  --brand-accent:              var(--color-success);

  /* Smooth-transition tokens (Bonus B4; also consumed by Task 3.7) */
  --theme-transition:          300ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Body bg flip — belts and braces, since many pages inline-style */
:root[data-theme="light"] body,
:root[data-theme="light"] .content-area,
:root[data-theme="light"] .app-shell {
  background: var(--color-bg) !important;
  color: var(--color-text-primary);
  transition:
    background-color var(--theme-transition),
    color            var(--theme-transition);
}

/* Cards, panels, sidebar — soft elevation (not flat) */
:root[data-theme="light"] .sidebar,
:root[data-theme="light"] .header,
:root[data-theme="light"] .sp-panel,
:root[data-theme="light"] .card,
:root[data-theme="light"] .widget-panel,
:root[data-theme="light"] .dashboard-widget,
:root[data-theme="light"] .panel-card {
  background: var(--color-surface);
  border-color: var(--color-border);
  color: var(--color-text-primary);
  box-shadow: var(--shadow-sm);
}

:root[data-theme="light"] .sidebar {
  box-shadow: var(--shadow-md);
}

/* Inputs */
:root[data-theme="light"] input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
:root[data-theme="light"] textarea,
:root[data-theme="light"] select {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text-primary);
}
:root[data-theme="light"] input:focus,
:root[data-theme="light"] textarea:focus,
:root[data-theme="light"] select:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(184, 148, 31, 0.18);
  outline: none;
}

/* Subtle gold accents on hover */
:root[data-theme="light"] .nav-item:hover {
  background: rgba(184, 148, 31, 0.08);
  color: var(--color-accent-strong);
}
:root[data-theme="light"] .nav-item.active {
  background: rgba(184, 148, 31, 0.14);
  color: var(--color-accent-strong);
  border-inline-end: 3px solid var(--color-accent);
}

/* Links: gold on hover, readable charcoal by default */
:root[data-theme="light"] a {
  color: var(--color-accent-strong);
}
:root[data-theme="light"] a:hover {
  color: var(--color-accent);
}

/* ══════════════════════════════════════════════════════════════════════════ */
/* BONUS B2 — High-Contrast variant (WCAG AAA)                                 */
/* ══════════════════════════════════════════════════════════════════════════ */
:root[data-theme="light-hc"] {
  --color-bg:               #FFFFFF;
  --color-surface:          #FFFFFF;
  --color-surface-elevated: #F1EFE7;
  --color-text-primary:     #000000;
  --color-text-secondary:   #1E293B;
  --color-accent:           #8F6F00;  /* deeper for AAA */
  --color-border:           #000000;
  --shadow-sm:              0 1px 0 #000000;
  --shadow-md:              0 2px 0 #000000;
}

/* ══════════════════════════════════════════════════════════════════════════ */
/* BONUS B1 — Print-optimized                                                   */
/* ══════════════════════════════════════════════════════════════════════════ */
@media print {
  :root {
    --color-bg:              #FFFFFF !important;
    --color-surface:         #FFFFFF !important;
    --color-text-primary:    #000000 !important;
    --color-text-secondary:  #333333 !important;
    --color-accent:          #000000 !important;
    --color-border:          #000000 !important;
    --shadow-xs: none !important;
    --shadow-sm: none !important;
    --shadow-md: none !important;
    --shadow-lg: none !important;
  }
  body, .sidebar, .header, .card {
    background: #FFFFFF !important;
    color: #000000 !important;
    box-shadow: none !important;
  }
  .no-print,
  .sidebar,
  .header-actions,
  [id$="Fab"],
  [id$="fab"] {
    display: none !important;
  }
}