/* =========================================================================
   Yohannes Gebeyehu Garage — Industrial Precision theme
   Light + Dark mode via CSS custom properties. Tailwind utilities map to
   these variables (see the tailwind.config block in index.html), so the
   same markup works in both themes.
   ========================================================================= */

/* ---- Dark theme (default for this brand) ------------------------------- */
:root,
:root.dark {
  --background:                 #121416;
  --surface:                    #121416;
  --surface-container-lowest:   #0c0e10;
  --surface-container-low:      #1a1c1e;
  --surface-container:          #1e2022;
  --surface-container-high:     #282a2c;
  --surface-container-highest:  #333537;

  --on-surface:                 #e2e2e5; /* primary body text          */
  --on-surface-variant:         #aeb1b6; /* secondary / muted text     */
  --on-surface-strong:          #ffffff; /* headings                   */

  --outline:                    #8b8f94;
  --outline-variant:            #33373d;

  --accent:                     #f97316; /* safety orange — fills/bars */
  --accent-strong:              #fb8a2e; /* hover                      */
  --accent-text:                #fdab63; /* orange used as text/icon   */
  --on-accent:                  #1c1306; /* near-black text on orange  */
  --error:                      #ffb4ab;

  --hero-overlay-from:          rgba(18, 20, 22, 0.96);
  --hero-overlay-via:           rgba(18, 20, 22, 0.78);
  --hero-overlay-to:            rgba(18, 20, 22, 0.30);

  --pattern-dot:                #2a2e33;
  --carbon-a:                   #1a1c1e;
  --carbon-b:                   #121416;
  --carbon-opacity:             0.06;
  --bevel-shadow:               inset 0 1px 0 rgba(255, 255, 255, 0.12),
                                0 2px 6px rgba(0, 0, 0, 0.55);
  --shadow-card:                0 1px 2px rgba(0, 0, 0, 0.4);
}

/* ---- Light theme ------------------------------------------------------- */
:root.light {
  --background:                 #f5f6f8;
  --surface:                    #ffffff;
  --surface-container-lowest:   #ffffff;
  --surface-container-low:      #f1f3f5;
  --surface-container:          #eceef1;
  --surface-container-high:     #e3e6ea;
  --surface-container-highest:  #dbdee3;

  --on-surface:                 #1a1c1e;
  --on-surface-variant:         #53565c;
  --on-surface-strong:          #0c0e10;

  --outline:                    #74777b;
  --outline-variant:            #cfd2d7;

  --accent:                     #f97316;
  --accent-strong:              #ea6a0c;
  --accent-text:                #c2410c;
  --on-accent:                  #1c1306; /* black text on orange (brand) */
  --error:                      #b3261e;

  --hero-overlay-from:          rgba(12, 14, 16, 0.92);
  --hero-overlay-via:           rgba(12, 14, 16, 0.70);
  --hero-overlay-to:            rgba(12, 14, 16, 0.25);

  --pattern-dot:                #d4d7dc;
  --carbon-a:                   #e9ebee;
  --carbon-b:                   #f5f6f8;
  --carbon-opacity:             0.5;
  --bevel-shadow:               inset 0 1px 0 rgba(255, 255, 255, 0.6),
                                0 2px 8px rgba(15, 23, 42, 0.12);
  --shadow-card:                0 1px 2px rgba(15, 23, 42, 0.06),
                                0 4px 16px rgba(15, 23, 42, 0.04);
}

/* ---- Base -------------------------------------------------------------- */
html { scroll-behavior: smooth; }

body {
  background-color: var(--background);
  color: var(--on-surface);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Themeable surfaces also transition smoothly when toggling */
.bg-surface, .bg-surface-container, .bg-surface-container-low,
.bg-surface-container-lowest, .bg-surface-container-high, .bg-background {
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* ---- Industrial textures ---------------------------------------------- */
.industrial-pattern {
  background-image: radial-gradient(var(--pattern-dot) 0.5px, transparent 0.5px);
  background-size: 24px 24px;
}

.carbon-texture {
  background-image: repeating-linear-gradient(
    45deg,
    var(--carbon-a) 25%, var(--carbon-b) 25%, var(--carbon-b) 50%,
    var(--carbon-a) 50%, var(--carbon-a) 75%, var(--carbon-b) 75%, var(--carbon-b) 100%
  );
  background-size: 6px 6px;
  opacity: var(--carbon-opacity);
}

.bevel-edge { box-shadow: var(--bevel-shadow); }

.orange-glow { transition: box-shadow 0.25s ease, transform 0.1s ease; }
.orange-glow:hover { box-shadow: 0 0 22px rgba(249, 115, 22, 0.45); }

/* Hero photo overlay (kept dark in both themes for legible white text) */
.hero-overlay {
  background: linear-gradient(
    90deg,
    var(--hero-overlay-from) 0%,
    var(--hero-overlay-via) 45%,
    var(--hero-overlay-to) 100%
  );
}

/* Pulsing "live" status dot */
.signal-dot { position: relative; }
.signal-dot::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 9999px;
  border: 1px solid var(--accent);
  opacity: 0.6;
  animation: signal-pulse 1.8s ease-out infinite;
}
@keyframes signal-pulse {
  0%   { transform: scale(0.7); opacity: 0.7; }
  100% { transform: scale(1.8); opacity: 0; }
}

/* Section reveal */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

/* Sticky nav background (translucent for the backdrop blur) */
#site-nav { background-color: color-mix(in srgb, var(--surface) 88%, transparent); }

/* Header drop shadow once scrolled */
.nav-scrolled { box-shadow: 0 1px 0 var(--outline-variant), 0 8px 24px rgba(0,0,0,0.18); }

/* Language menu: show the check only for the active language */
.lang-option .material-symbols-outlined { opacity: 0; transition: opacity 0.15s ease; }
.lang-option[aria-current="true"] .material-symbols-outlined { opacity: 1; }

/* Material Symbols sizing helper */
.material-symbols-outlined { font-variation-settings: 'wght' 400, 'GRAD' 0, 'opsz' 24; }
.icon-fill { font-variation-settings: 'FILL' 1; }

/* Mono micro-label */
.mono { font-family: 'JetBrains Mono', monospace; letter-spacing: 0.05em; }

/* Language menu */
.lang-menu[hidden] { display: none; }

/* Full-page capture helper (?cap=1): don't stretch hero to viewport */
html.capture #home { min-height: 0 !important; }
html.capture .reveal { opacity: 1; transform: none; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { transition: none; opacity: 1; transform: none; }
  .signal-dot::after { animation: none; }
  * { transition-duration: 0.01ms !important; }
}