/* ============================================================
   FIELDMAX Design Tokens
   Source of truth: packages/frontend/BRAND.md Section 2
   ============================================================ */

/* ---------- LIGHT MODE (default) ---------- */
:root,
[data-theme="light"] {
  /* Backgrounds */
  --color-bg-page: #ffffff;
  --color-bg-card: #ffffff;
  --color-bg-subtle: #f8fafc;
  --color-bg-canvas: #f1f5f9;
  --color-bg-modal: #ffffff;
  --color-bg-overlay: rgba(0, 0, 0, 0.40);
  --color-bg-overlay-strong: rgba(0, 0, 0, 0.70);
  --color-bg-overlay-media: rgba(0, 0, 0, 0.92);
  --color-bg-input: #f8fafc;
  --color-bg-disabled: #e2e8f0;
  --color-bg-hover: #f1f5f9;
  --color-bg-active: #e2e8f0;
  --color-bg-header: #0a1628;

  /* Text */
  --color-text-primary: #1e293b;
  --color-text-secondary: #334155;
  --color-text-muted: #64748b;
  --color-text-caption: #94a3b8;
  --color-text-disabled: #94a3b8;
  --color-text-placeholder: #94a3b8;
  --color-text-eyebrow: #64748b;
  --color-text-link: #14b8a6;
  --color-text-link-hover: #0d9488;
  --color-text-inverse: #ffffff;
  --color-text-inverse-muted: rgba(255, 255, 255, 0.7);
  --color-text-inverse-faint: rgba(255, 255, 255, 0.4);

  /* Borders */
  --color-border-default: #e2e8f0;
  --color-border-subtle: #f1f5f9;
  --color-border-strong: #cbd5e1;
  --color-border-input: #e2e8f0;
  --color-border-focus: #1e3a5f;
  --color-border-error: #ef4444;
  --color-border-selected: #1e3a5f;
  --color-border-dashed: rgba(244, 103, 26, 0.4);

  /* Overdue card surface (light mode) */
  --color-bg-overdue: #fef2f2;       /* light red wash */
  --color-text-overdue: #991b1b;     /* dark red text */
  --color-border-overdue: #ef4444;   /* solid red accent */

  /* Brand & accents (theme-invariant) */
  --color-brand-primary: #f4671a;
  --color-brand-primary-strong: #ea580c;
  --color-brand-secondary: #0a1628;
  --color-brand-secondary-mid: #1e3a5f;
  --color-brand-secondary-soft: #334155;
  --color-accent-success: #16a34a;
  --color-accent-success-hover: #15803d;
  --color-accent-success-bright: #22c55e;
  --color-accent-warning: #eab308;
  --color-accent-error: #ef4444;
  --color-accent-info: #3b82f6;
  --color-accent-research: #14b8a6;

  /* Primary CTA (theme-aware: green in light) */
  --color-cta-primary: #16a34a;
  --color-cta-primary-hover: #15803d;

  /* Section accents (theme-invariant) */
  --color-section-work: #22c55e;
  --color-section-manpower: #3b82f6;
  --color-section-timecards: #8b5cf6;
  --color-section-equipment: #f4671a;
  --color-section-delivery: #06b6d4;
  --color-section-delay: #ef4444;
  --color-section-safety: #ef4444;
  --color-section-notes: #64748b;
  --color-section-weather: #0ea5e9;
  --color-section-visitor: #a855f7;
  --color-section-inspection: #14b8a6;
  /* Daily-log report rails added for Vision A (theme-invariant) */
  --color-section-accident: #ef4444;
  --color-section-call: #0ea5e9;
  --color-section-quantity: #8b5cf6;
  --color-section-dumpster: #64748b;
  --color-section-waste: #a16207;
  --color-section-dcr: #3b82f6;
  --color-section-plan-revision: #14b8a6;
  --color-section-productivity: #22c55e;

  /* Subtle success wash (light) — green "ok" pill background */
  --color-bg-success-subtle: #ecfdf5;

  /* Shadows */
  --shadow-card: none;
  --shadow-card-hover: none;
  --shadow-modal: 0 4px 16px rgba(0, 0, 0, 0.1);
  --shadow-dropdown: 0 -4px 12px rgba(0, 0, 0, 0.1);
}

/* ---------- DARK MODE ---------- */
[data-theme="dark"] {
  /* Backgrounds */
  --color-bg-page: #0a1628;
  --color-bg-card: #0f1d33;
  --color-bg-subtle: #14253f;
  --color-bg-canvas: #0a1628;
  --color-bg-modal: #0f1d33;
  --color-bg-overlay: rgba(0, 0, 0, 0.40);
  --color-bg-overlay-strong: rgba(0, 0, 0, 0.70);
  --color-bg-overlay-media: rgba(0, 0, 0, 0.92);
  --color-bg-input: rgba(255, 255, 255, 0.04);
  --color-bg-disabled: rgba(255, 255, 255, 0.06);
  --color-bg-hover: #14253f;
  --color-bg-active: #1a2b4a;
  --color-bg-header: #0a1628;

  /* Text */
  --color-text-primary: #ffffff;
  --color-text-secondary: rgba(255, 255, 255, 0.85);
  --color-text-muted: rgba(255, 255, 255, 0.6);
  --color-text-caption: rgba(255, 255, 255, 0.5);
  --color-text-disabled: rgba(255, 255, 255, 0.4);
  --color-text-placeholder: rgba(255, 255, 255, 0.4);
  --color-text-eyebrow: #f4671a;
  --color-text-link: #14b8a6;
  --color-text-link-hover: #2dd4bf;
  --color-text-inverse: #ffffff;
  --color-text-inverse-muted: rgba(255, 255, 255, 0.7);
  --color-text-inverse-faint: rgba(255, 255, 255, 0.4);

  /* Borders */
  --color-border-default: rgba(255, 255, 255, 0.08);
  --color-border-subtle: rgba(255, 255, 255, 0.04);
  --color-border-strong: rgba(255, 255, 255, 0.15);
  --color-border-input: rgba(255, 255, 255, 0.12);
  --color-border-focus: #f4671a;
  --color-border-error: #ef4444;
  --color-border-selected: #f4671a;
  --color-border-dashed: rgba(244, 103, 26, 0.4);

  /* Primary CTA (theme-aware: orange in dark) */
  --color-cta-primary: #f4671a;
  --color-cta-primary-hover: #ea580c;

  /* Overdue card surface (dark mode) */
  --color-bg-overdue: #2a1416;       /* dark red wash, was hardcoded */
  --color-text-overdue: #fca5a5;     /* light red text */
  --color-border-overdue: #ef4444;   /* solid red accent */

  /* Daily-log report rails added for Vision A (theme-invariant — identical to light) */
  --color-section-accident: #ef4444;
  --color-section-call: #0ea5e9;
  --color-section-quantity: #8b5cf6;
  --color-section-dumpster: #64748b;
  --color-section-waste: #a16207;
  --color-section-dcr: #3b82f6;
  --color-section-plan-revision: #14b8a6;
  --color-section-productivity: #22c55e;

  /* Subtle success wash (dark) — green "ok" pill background */
  --color-bg-success-subtle: rgba(34, 197, 94, 0.14);

  /* Shadows */
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-modal: 0 8px 32px rgba(0, 0, 0, 0.5);
  --shadow-dropdown: 0 -4px 12px rgba(0, 0, 0, 0.3);
}

/* ============================================================
   Theme Toggle Button
   ============================================================ */

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--color-border-default);
  border-radius: 8px;
  color: var(--color-text-primary);
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.theme-toggle:hover {
  background: var(--color-bg-hover);
  border-color: var(--color-border-strong);
}

.theme-toggle:focus-visible {
  outline: 2px solid var(--color-brand-primary);
  outline-offset: 2px;
}

.theme-toggle .theme-toggle-icon {
  width: 18px;
  height: 18px;
}

/* Sun icon visible in dark mode (clicking it goes to light) */
.theme-toggle .theme-toggle-sun {
  display: none;
}

[data-theme="dark"] .theme-toggle .theme-toggle-sun {
  display: block;
}

[data-theme="dark"] .theme-toggle .theme-toggle-moon {
  display: none;
}

/* Moon icon visible in light mode (clicking it goes to dark) */
[data-theme="light"] .theme-toggle .theme-toggle-moon {
  display: block;
}

[data-theme="light"] .theme-toggle .theme-toggle-sun {
  display: none;
}

/* On dark navy header chrome — invert colors for visibility regardless of theme */
.app-header .theme-toggle,
header.bg-\[\#0a1628\] .theme-toggle {
  color: var(--color-text-inverse);
  border-color: rgba(255, 255, 255, 0.2);
}

.app-header .theme-toggle:hover,
header.bg-\[\#0a1628\] .theme-toggle:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.4);
}

/* ============================================================
   Settings Theme Picker (segmented Light/Dark buttons)
   ============================================================ */

.theme-toggle-group {
  display: inline-flex;
  gap: 8px;
  padding: 4px;
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border-default);
  border-radius: 12px;
}

.theme-option {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--color-text-secondary);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.theme-option:hover {
  color: var(--color-text-primary);
  background: var(--color-bg-hover);
}

.theme-option:focus-visible {
  outline: 2px solid var(--color-brand-primary);
  outline-offset: 2px;
}

.theme-option[data-active="true"] {
  background: var(--color-bg-card);
  color: var(--color-text-primary);
  border-color: var(--color-border-default);
  box-shadow: var(--shadow-card);
}

.theme-option-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.theme-option-label {
  white-space: nowrap;
}

/* ============================================================
   Theme-Aware Wordmark System
   Source of truth: packages/frontend/BRAND.md Section 6
   ============================================================ */

/* Both variants hidden by default — CSS shows the matching one */
.wordmark-themed-light,
.wordmark-themed-dark {
  display: none;
}

/* In light mode, show the dark wordmark (dark text reads on light bg) */
[data-theme="light"] .wordmark-themed-dark {
  display: inline-block;
}

/* In dark mode, show the white wordmark */
[data-theme="dark"] .wordmark-themed-light {
  display: inline-block;
}

/* ---------- Sizing classes ---------- */

.header-wordmark {
  height: 14px;
  width: auto;
  display: inline-block;
  vertical-align: middle;
}

.mobile-header-wordmark {
  height: 14px;
  width: auto;
  display: inline-block;
  vertical-align: middle;
}

.page-wordmark {
  height: 16px;
  width: auto;
  display: inline-block;
  vertical-align: middle;
}