/* ==========================================================================
   Theme tokens — dark is the default at :root; light is the override.
   ========================================================================== */

:root {
  /* Dark (default) — 2 alternating section colors with visible gap, masculine palette */
  --bg-primary:   #0a0a0d;
  --bg-secondary: #16181e;
  --bg-elevated:  #1f2229;
  --bg-nav:       #1f2229;
  --bg-footer:    #050507;

  --text-primary:   #f5f5f7;
  --text-secondary: #b5b5bd;
  --text-muted:     #7a7a85;
  --text-on-nav:       #ffffff;
  --text-on-nav-muted: #b5b7c2;

  --border:       #2a2a32;
  --border-strong:#3a3a45;
  --border-on-nav: rgba(255, 255, 255, 0.14);
  --nav-hover-bg:     rgba(255, 255, 255, 0.08);
  --nav-hover-border: rgba(255, 255, 255, 0.32);

  --accent:        #e53935;
  --accent-hover:  #ff4d4a;
  --accent-soft:   rgba(229, 57, 53, 0.12);

  --success: #4caf50;
  --warning: #ffb300;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 6px 18px rgba(0,0,0,0.35);
  --shadow-lg: 0 16px 40px rgba(0,0,0,0.45);

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;
}

[data-theme="light"] {
  --bg-primary:   #ffffff;
  --bg-secondary: #eef0f4;
  --bg-elevated:  #ffffff;
  --bg-nav:       #e5e7eb;
  --bg-footer:    #0a0a0d;

  --text-primary:   #101014;
  --text-secondary: #4a4a55;
  --text-muted:     #5f6068;
  --text-on-nav:       #101014;
  --text-on-nav-muted: #4a4a55;

  --border:       #e5e7eb;
  --border-strong:#cfd2d7;
  --border-on-nav: rgba(16, 16, 20, 0.14);
  --nav-hover-bg:     rgba(16, 16, 20, 0.08);
  --nav-hover-border: rgba(16, 16, 20, 0.22);

  --accent:        #d32f2f;
  --accent-hover:  #b71c1c;
  --accent-soft:   rgba(211, 47, 47, 0.08);

  --shadow-sm: 0 1px 2px rgba(16,16,20,0.08);
  --shadow-md: 0 8px 22px rgba(16,16,20,0.08);
  --shadow-lg: 0 16px 40px rgba(16,16,20,0.10);
}

html,
body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  transition: background-color 0.3s ease, color 0.3s ease;
}
