/* ==========================================================================
   SteelCAM shared theme — steel/industrial palette (light + dark), same token
   structure as filemuster.com's css/theme.css (S:\MyProjects\Infra\Websites_Live\
   FileMuster.com\public_html\css\theme.css) so both sites share one mental
   model even though the palettes differ. Linked by every page; page-specific
   layout stays in each page's <style>, all colours come from the tokens below.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700&family=Inter:wght@300;400;500;600&display=swap');

:root {
  /* Surfaces */
  --bg:            #F4F4F1;
  --surface:       #FFFFFF;
  --surface-2:     #ECEBE6;
  --surface-3:     #E2E0D8;
  /* Borders */
  --border:        #D9D6CC;
  --border-strong: #C6C2B4;
  /* Text */
  --text:          #22221F;
  --text-muted:    #5C5B54;
  --text-faint:    #8B897F;
  /* Steel Blue accent — reserved for primary actions/links */
  --accent:        #185FA5;
  --accent-hover:  #124878;
  --accent-soft:   rgba(24,95,165,0.10);
  --accent-line:   rgba(24,95,165,0.28);
  --on-accent:     #FFFFFF;
  /* Rust — secondary highlight (price badges, small emphasis), never buttons */
  --accent-2:      #993C1D;
  --accent-2-soft: rgba(153,60,29,0.10);
  /* Trust / semantic */
  --green:         #3D8F5B;
  --amber:         #C2872E;
  --red:           #B14536;
  /* Effects */
  --shadow:        0 4px 20px rgba(34,34,31,0.07);
  --shadow-lg:     0 12px 34px rgba(34,34,31,0.12);
  /* Type */
  --font-display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

:root[data-theme="dark"] {
  --bg:            #1C1C1B;
  --surface:       #2C2C2A;
  --surface-2:     #262625;
  --surface-3:     #333330;
  --border:        #45443F;
  --border-strong: #57564F;
  --text:          #F1F0EA;
  --text-muted:    #ACA99E;
  --text-faint:    #837F72;
  --accent:        #4C8FD1;
  --accent-hover:  #6BA6E0;
  --accent-soft:   rgba(76,143,209,0.16);
  --accent-line:   rgba(76,143,209,0.36);
  --on-accent:     #0E1B2A;
  --accent-2:      #E0784E;
  --accent-2-soft: rgba(224,120,78,0.16);
  --green:         #6FBF86;
  --amber:         #E0B04B;
  --red:           #E0655A;
  --shadow:        0 4px 20px rgba(0,0,0,0.30);
  --shadow-lg:     0 14px 36px rgba(0,0,0,0.45);
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  transition:background .3s ease, color .3s ease;
}

::-webkit-scrollbar{width:8px;}
::-webkit-scrollbar-track{background:var(--surface-2);}
::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:4px;}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0;}

/* Theme toggle button (in the nav) */
.theme-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:9px;
  background:transparent;border:1px solid var(--border-strong);
  color:var(--text-muted);cursor:pointer;transition:.2s;flex-shrink:0;
}
.theme-toggle:hover{color:var(--accent);border-color:var(--accent);background:var(--accent-soft);}
.theme-toggle svg{width:18px;height:18px;}
.theme-toggle .icon-moon{display:none;}
:root[data-theme="dark"] .theme-toggle .icon-sun{display:none;}
:root[data-theme="dark"] .theme-toggle .icon-moon{display:block;}