/* ============================================================================
   MERA JOB SAATHI: SAFFRON + INDIA GREEN THEME
   This file is loaded after styles.css on index.html.
   ============================================================================ */

/* Light theme */
:root {
  --primary: #ea580c;
  --primary-hover: #c2410c;
  --primary-light: #fff1e6;

  --secondary: #15803d;
  --secondary-hover: #166534;
  --action-green: #15803d;
  --action-green-hover: #166534;
  --action-green-light: #f0fdf4;
  --emerald: #15803d;
  --emerald-hover: #166534;
  --emerald-light: #f0fdf4;

  --bg-html: #efe6da;
  --bg-body: #fdf7f0;
  --bg-grid-line: rgba(58, 26, 8, 0.06);
  --topbar-border: rgba(58, 26, 8, 0.12);
  --nav-controls-bg: rgba(255, 255, 255, 0.88);
  --nav-controls-border: rgba(255, 255, 255, 0.9);
  --nav-link-hover: #fbeee0;
  --surface: #ffffff;
  --surface-card: #ffffff;
  --surface-subtle: #fdf9f4;
  --surface-hover: #f8efe4;

  --text-dark: #3a1a08;
  --text-body: #5a3a26;
  --text-muted: #8a6a58;

  --border: #eadfd2;
  --border-strong: #d9c9b8;
  --border-focus: #ea580c;

  --shadow-sm: 0 1px 3px rgba(58, 26, 8, 0.07);
  --shadow-md: 0 4px 14px rgba(58, 26, 8, 0.07);
  --shadow-lg: 0 10px 25px rgba(58, 26, 8, 0.1);
}

.btn-coral {
  color: #ffffff;
}

.btn-coral:hover {
  background: var(--action-green-hover);
}

.resume-icon-bubble {
  background: #dcfce7;
  color: #15803d;
}

/* Dark theme */
[data-theme="dark"] {
  --primary: #f97316;
  --primary-hover: #fb923c;
  --primary-light: rgba(249, 115, 22, 0.18);

  --secondary: #22c55e;
  --secondary-hover: #16a34a;
  --action-green: #22c55e;
  --action-green-hover: #4ade80;
  --action-green-light: rgba(34, 197, 94, 0.18);
  --emerald: #22c55e;
  --emerald-hover: #16a34a;
  --emerald-light: rgba(34, 197, 94, 0.18);

  --bg-html: #0d0907;
  --bg-body: #17110d;
  --bg-grid-line: rgba(255, 255, 255, 0.035);
  --topbar-border: rgba(255, 255, 255, 0.08);
  --nav-controls-bg: rgba(33, 24, 18, 0.88);
  --nav-controls-border: rgba(255, 255, 255, 0.1);
  --nav-link-hover: rgba(255, 255, 255, 0.08);
  --surface: #211812;
  --surface-card: #211812;
  --surface-subtle: #2a1f17;
  --surface-hover: #342619;

  --text-dark: #fdf3ea;
  --text-body: #e7d5c4;
  --text-muted: #b39a86;

  --border: rgba(255, 237, 220, 0.11);
  --border-strong: rgba(255, 237, 220, 0.2);
  --border-focus: #fb923c;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 14px 34px rgba(0, 0, 0, 0.6);
}

[data-theme="dark"] .btn-primary {
  color: #1c0a02;
  font-weight: 600;
}

[data-theme="dark"] .btn-coral {
  color: #052e16;
  font-weight: 600;
}

[data-theme="dark"] .btn-outline {
  background: rgba(255, 255, 255, 0.04);
  color: #fb923c;
  border-color: #f97316;
}

[data-theme="dark"] .btn-outline:hover {
  background: rgba(249, 115, 22, 0.18);
}

[data-theme="dark"] .auth-mode-tab.active {
  background: #342619;
  color: #ffffff;
}

[data-theme="dark"] .mobile-nav-item.active {
  color: #fb923c;
}

[data-theme="dark"] .resume-icon-bubble {
  background: rgba(34, 197, 94, 0.18);
  color: #4ade80;
}

/* Match the system dark preference before theme.js sets data-theme. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --primary: #f97316;
    --primary-hover: #fb923c;
    --primary-light: rgba(249, 115, 22, 0.18);
    --secondary: #22c55e;
    --secondary-hover: #16a34a;
    --action-green: #22c55e;
    --action-green-hover: #4ade80;
    --action-green-light: rgba(34, 197, 94, 0.18);
    --emerald: #22c55e;
    --emerald-hover: #16a34a;
    --emerald-light: rgba(34, 197, 94, 0.18);
    --bg-html: #0d0907;
    --bg-body: #17110d;
    --bg-grid-line: rgba(255, 255, 255, 0.035);
    --topbar-border: rgba(255, 255, 255, 0.08);
    --nav-controls-bg: rgba(33, 24, 18, 0.88);
    --nav-controls-border: rgba(255, 255, 255, 0.1);
    --nav-link-hover: rgba(255, 255, 255, 0.08);
    --surface: #211812;
    --surface-card: #211812;
    --surface-subtle: #2a1f17;
    --surface-hover: #342619;
    --text-dark: #fdf3ea;
    --text-body: #e7d5c4;
    --text-muted: #b39a86;
    --border: rgba(255, 237, 220, 0.11);
    --border-strong: rgba(255, 237, 220, 0.2);
    --border-focus: #fb923c;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 14px 34px rgba(0, 0, 0, 0.6);
  }
}