/* =========================================================
   DARK THEME - White, Black, Red Only
   All color tokens centralized
========================================================= */

:root {
  /* Accent color - single source of truth for red */
  --accent: #ff0000;
  --accent-light: rgba(255, 0, 0, 0.3);
  --accent-glow: rgba(255, 0, 0, 0.4);
  --accent-glow-strong: rgba(255, 0, 0, 0.6);
  --accent-glow-intense: rgba(255, 0, 0, 0.5);
  
  /* Base colors */
  --bg-primary: #000000;
  --bg-secondary: #1a1a1a;
  --bg-tertiary: #2a2a2a;
  --text-primary: #ffffff;
  --text-secondary: #e6e6e6;
  --text-muted: #cccccc;
  --text-inverted: #000000;
  --border-primary: #333333;
  --border-secondary: #444444;

  /* Component colors */
  --chip-bg: #1a1a1a;
  --chip-border: #333333;
  --chip-text: #ffffff;
  --cta-bg: var(--accent);
  --cta-text: #ffffff;

  /* Hero colors */
  --hero-bg: #000000;
  --hero-text: #ffffff;

  /* About section colors */
  --about-tile-bg: #1a1a1a;
  --about-tile-border: #333333;
  --about-tile-text: #ffffff;
  --about-stack-bg: #000000;
  --about-stack-border: #333333;
  --about-stack-dashed: #333333;
  --about-socials-bg: #000000;
  --about-socials-border: #333333;
  --about-btn-bg: #000000;
  --about-btn-border: #333333;
  --about-btn-text: #ffffff;
  --about-orbit-line: hsla(0, 0%, 100%, 0.575);
  --about-globe-base: 1;
  --about-globe-dark: 1;
  --about-globe-glow: 0.3;

  /* Experience colors */
  --exp-text: #ffffff;
  --exp-muted: #cccccc;
  --exp-spine: #ffffff;
  --exp-bridge: #333333;
  --exp-dot: #ffffff;
  --exp-dot-ring: rgba(255, 255, 255, 0.2);
  --exp-logo-bg: #1a1a1a;
  --exp-logo-border: rgba(255, 255, 255, 0.3);

  /* Projects colors */
  --proj-panel-bg: #000000;
  --proj-panel-text: #ffffff;
  --proj-media-bg: #1a1a1a;
  --proj-btn-bg: #2a2a2a;
  --proj-focus: var(--accent);

  /* Reviews colors */
  --rev-card-bg: #000000;
  --rev-card-border: #333333;
  --rev-card-text: #ffffff;
  --rev-avatar-bg: #2a2a2a;
  --rev-avatar-border: #333333;

  /* Contact colors */
  --contact-form-bg: #1a1a1a;
  --contact-form-border: #333333;
  --contact-form-text: #ffffff;
  --contact-input-bg: #000000;
  --contact-input-border: #444444;
  --contact-input-focus: var(--accent);
  --contact-submit-bg: #1a1a1a;
  --contact-error: var(--accent);
  --contact-invalid: var(--accent);
  --contact-status-bg: #1a1a1a;
  --contact-status-border: var(--accent);

  /* Extra section colors */
  --extra-activity-bg: #000000;
  --extra-activity-border: #333333;
  --extra-activity-text: #ffffff;
  --extra-journey-bg: #000000;
  --extra-journey-card-bg: #000000;
  --extra-journey-media-bg: #1a1a1a;
  --extra-yt-bg: #000000;
  --extra-yt-thumb-bg: #1a1a1a;
  --extra-yt-badge-bg: #000000;
  --extra-yt-badge-border: var(--accent);
  --extra-scrollbar-thumb: #444444;
  --extra-scrollbar-track: #1a1a1a;

  /* Interactive states */
  --focus-outline: var(--accent);
  --hover-overlay: rgba(255, 255, 255, 0.1);
  --shadow-light: rgba(0, 0, 0, 0.5);
  --shadow-heavy: rgba(0, 0, 0, 0.8);
}

/* Contact form input focus fix - remove double border */
.contact input:focus,
.contact textarea:focus,
input:focus,
textarea:focus,
[class*="contact"] input:focus,
[class*="contact"] textarea:focus {
  outline: none !important;
  border-color: var(--contact-input-focus) !important;
  box-shadow: 0 0 0 1px var(--contact-input-focus) !important;
}

/* Projects: make chevron SVGs white in dark mode */
/* If you used <img class="chev-icon" src="...svg"> */
.projects .proj-control-btn .chev-icon {
  /* turn any icon white */
  filter: brightness(0) invert(1);
}

/* If you used inline <svg> instead of <img> */
.projects .proj-control-btn {
  color: var(--text-primary); /* sets currentColor for any inline svg */
}

.projects .proj-control-btn svg,
.projects .proj-control-btn svg * {
  fill: var(--text-primary) !important;
  stroke: var(--text-primary) !important;
}

/* Red underline for section headings and header - Use classes for precise control */

/* Main section headings only - exclude subsection headings */
.section-title, 
.section-heading,
[class*="section-title"]:not([class*="sub"]):not([class*="secondary"]):not([class*="card"]), 
[class*="section-heading"]:not([class*="sub"]):not([class*="secondary"]):not([class*="card"]) {
  text-decoration: underline !important;
  text-decoration-color: var(--accent) !important;
  text-underline-offset: 0.2em !important;
  text-decoration-thickness: 2px !important;
}

/* Specifically exclude extra section sub-headings */
.extra-section .card-title,
.extra-section .subsection-title,
.extra-section .activity-title,
.extra-section .journey-title,
.extra-section h3,
.extra-section h4,
.extra-section h5,
.extra-section h6 {
  text-decoration: none !important;
}

/* Header elements - No underlines */
.site-header a,
.site-header .nav a {
  text-decoration: none !important;
}

.site-header a:hover,
.site-header .nav a:hover {
  text-decoration: none !important;
}

/* Contact form input focus fix - remove double border */
.contact input:focus,
.contact textarea:focus,
input:focus,
textarea:focus,
[class*="contact"] input:focus,
[class*="contact"] textarea:focus {
  outline: none !important;
  border-color: var(--contact-input-focus) !important;
  box-shadow: 0 0 0 1px var(--contact-input-focus) !important;
}