/* ===== COSTA Industries — Design Tokens ===== */
/* Source of truth for theme, typography, spacing, layout and feedback states. */
:root {
  /* Surfaces */
  --bg-primary: #fafbfc;
  --bg-secondary: #ffffff;
  --bg-tertiary: #f5f6f7;
  --bg-interactive: #eef0f2;
  --bg-header: rgba(250, 251, 252, 0.88);
  --bg-overlay: rgba(15, 20, 25, 0.72);
  --bg-overlay-soft: rgba(0, 0, 0, 0.4);
  --bg-overlay-strong: rgba(0, 0, 0, 0.6);

  /* Content */
  --text-primary: #1a1d23;
  --text-secondary: #4a5568;
  --text-tertiary: #5a6474;
  --text-inverse: #ffffff;
  --text-inverse-muted: rgba(255, 255, 255, 0.3);
  --divider-inverse: rgba(255, 255, 255, 0.6);

  /* Brand */
  --accent-primary: #c1a57b;
  --accent-secondary: #8b7355;
  --accent-border: #e2d5c5;
  --accent-subtle: rgba(193, 165, 123, 0.12);

  /* Borders and feedback */
  --divider: #e8eaed;
  --focus-ring: var(--accent-primary);
  --color-info: #1976d2;
  --color-info-strong: #0d47a1;
  --color-info-subtle: #e3f2fd;
  --color-success: #2e7d32;
  --color-success-strong: #1b5e20;
  --color-success-subtle: #e8f5e9;
  --color-warning: #b57632;
  --color-warning-strong: #8a4b08;
  --color-warning-subtle: #fff3e0;
  --color-danger: #c53030;
  --color-danger-strong: #991b1b;
  --color-danger-subtle: #fee2e2;
  --color-neutral: #64748b;
  --color-neutral-strong: #475569;
  --color-agent-lab: #2e7d32;
  --color-agent-nutrition: #b57632;
  --color-agent-pathology: #7c3aed;
  --color-agent-fitness: #0f766e;
  --color-agent-mental: #4f46e5;
  --color-agent-lab-subtle: #e8f5e9;
  --color-agent-nutrition-subtle: #fff3e0;
  --color-agent-pathology-subtle: #f3e8ff;
  --color-agent-fitness-subtle: #ccfbf1;
  --color-agent-mental-subtle: #e0e7ff;

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12);
  --shadow-xl: 0 12px 48px rgba(0, 0, 0, 0.16);

  /* Typography */
  --font-heading: 'Playfair Display', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;
  --text-6xl: 3.75rem;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-8: 3rem;
  --space-10: 4rem;
  --space-12: 6rem;
  --space-16: 8rem;

  /* Radius, motion and layout */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 999px;
  --content-max-width: 1200px;
  --ease-elegant: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-smooth: cubic-bezier(0.25, 0.1, 0.25, 1);
  --duration-fast: 200ms;
  --duration-medium: 300ms;
  --duration-slow: 400ms;
}

[data-theme='dark'] {
  --bg-primary: #0f1419;
  --bg-secondary: #1a1f28;
  --bg-tertiary: #242933;
  --bg-interactive: #2d3440;
  --bg-header: rgba(15, 20, 25, 0.88);
  --bg-overlay: rgba(0, 0, 0, 0.72);

  --text-primary: #e8eaed;
  --text-secondary: #b5bdc7;
  --text-tertiary: #9ba3ae;

  --accent-primary: #d4af6a;
  --accent-secondary: #b8935a;
  --accent-border: #3a3f4a;
  --accent-subtle: rgba(212, 175, 106, 0.16);

  --divider: #2a2f3a;
  --color-info-strong: #93c5fd;
  --color-info-subtle: #172554;
  --color-success: #388e3c;
  --color-success-strong: #86efac;
  --color-success-subtle: #052e16;
  --color-warning-strong: #fcd34d;
  --color-warning-subtle: #451a03;
  --color-danger: #e57373;
  --color-danger-strong: #fca5a5;
  --color-danger-subtle: #450a0a;
  --color-neutral: #94a3b8;
  --color-neutral-strong: #cbd5e1;
  --color-agent-lab: #86efac;
  --color-agent-nutrition: #fcd34d;
  --color-agent-pathology: #c4b5fd;
  --color-agent-fitness: #5eead4;
  --color-agent-mental: #a5b4fc;
  --color-agent-lab-subtle: #052e16;
  --color-agent-nutrition-subtle: #451a03;
  --color-agent-pathology-subtle: #3b0764;
  --color-agent-fitness-subtle: #042f2e;
  --color-agent-mental-subtle: #1e1b4b;

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 12px 48px rgba(0, 0, 0, 0.6);
}

/* Access and recovery pages do not run app.js; default only those pages to the OS theme. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .auth-page {
    --bg-primary: #0f1419;
    --bg-secondary: #1a1f28;
    --bg-tertiary: #242933;
    --bg-header: rgba(15, 20, 25, 0.88);
    --bg-overlay: rgba(0, 0, 0, 0.72);
    --text-primary: #e8eaed;
    --text-secondary: #b5bdc7;
    --text-tertiary: #9ba3ae;
    --accent-primary: #d4af6a;
    --accent-secondary: #b8935a;
    --accent-border: #3a3f4a;
    --accent-subtle: rgba(212, 175, 106, 0.16);
    --divider: #2a2f3a;
    --color-info-strong: #93c5fd;
    --color-info-subtle: #172554;
    --color-success: #388e3c;
    --color-success-strong: #86efac;
    --color-success-subtle: #052e16;
    --color-warning-strong: #fcd34d;
    --color-warning-subtle: #451a03;
    --color-danger: #e57373;
    --color-danger-strong: #fca5a5;
    --color-danger-subtle: #450a0a;
    --color-neutral: #94a3b8;
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 12px 48px rgba(0, 0, 0, 0.6);
  }
}