/* ========================================================================== Intercity Commodities Limited — Theme Aesthetic: FMCG importation & trade. Graphite + trading-floor amber + steel blue. Dark by default — confident, industrial, on the move. ========================================================================== */ :root{ --bg:#0d1216; --surface:#151b20; --surface-2:#1c242b; --text:#eef2f0; --muted:#93a3ac; --border:rgba(238,242,240,.10); --accent:#e0a23d; --accent-2:#3f86ac; --accent-ink:#14100a; --header-bg:rgba(11,15,18,.85); --nav-link:#eef2f0; --hero-overlay:linear-gradient(105deg,rgba(6,9,11,.93) 8%,rgba(6,9,11,.60) 54%,rgba(6,9,11,.26) 100%); --hero-lead:rgba(238,242,240,.88); --input-bg:rgba(255,255,255,.04); --input-bg-focus:rgba(255,255,255,.07); --cta-bg:linear-gradient(120deg,#151b20,#232d35); --footer-bg:#07090b; --shadow-sm:0 2px 12px rgba(2,4,5,.3); --shadow:0 24px 60px -24px rgba(2,4,5,.55); --shadow-lg:0 50px 100px -34px rgba(2,4,5,.6); --font-body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; --font-display:"Archivo","Inter",system-ui,sans-serif; --header-h:84px; } h1,.h1,h2,.h2,.display{font-weight:800;letter-spacing:-.02em} h3,.h3{font-weight:700} .eyebrow{color:var(--accent)} .site-header .brand{color:#fff} .site-header .nav-links a{color:rgba(255,255,255,.92)} .site-header .nav-links a.is-active{color:var(--accent)} .site-header .nav-toggle{border-color:rgba(255,255,255,.35)} .site-header .nav-toggle span{background:#fff} .site-header .theme-toggle{color:#fff;border-color:rgba(255,255,255,.35)} .site-header.is-scrolled .brand{color:var(--text)} .site-header.is-scrolled .nav-links a{color:var(--text)} .site-header.is-scrolled .nav-links a.is-active{color:var(--accent)} .site-header.is-scrolled .nav-toggle{border-color:var(--border)} .site-header.is-scrolled .nav-toggle span{background:var(--text)} .site-header.is-scrolled .theme-toggle{color:var(--text);border-color:var(--border)} .site-header .theme-toggle:hover{color:var(--accent);border-color:var(--accent)} /* ambient background — amber + steel glow, like sodium light over a freight yard */ body{background: radial-gradient(1200px 620px at 86% -10%,rgba(224,162,61,.09),transparent 60%), radial-gradient(950px 520px at -8% 20%,rgba(63,134,172,.09),transparent 60%), var(--bg)} .section--alt{background:var(--surface-2)} .section--dark{background:var(--footer-bg);color:#eef2f0;--text:#eef2f0;--muted:#8fa0a8;--border:rgba(238,242,240,.10);--surface:#12171b;--surface-2:#181f24} .section--dark .eyebrow{color:var(--accent)} .section--dark .card{background:#12171b} .site-footer{--text:#eef2f0;--muted:#8fa0a8;--border:rgba(238,242,240,.10)} .quote{font-family:var(--font-display);font-weight:600;font-size:clamp(1.35rem,2.6vw,2rem);line-height:1.4;letter-spacing:-.01em} .pill{background:rgba(255,255,255,.04)} ::selection{background:var(--accent);color:var(--accent-ink)} /* ========================================================================== Light theme — "Trading Floor Day": warm graphite paper, deep amber ink. Activated via . Dark remains the brand default. ========================================================================== */ html[data-theme="light"]{ --bg:#f6f4ef; --surface:#ffffff; --surface-2:#ece7db; --text:#1c1a14; --muted:#5c584c; --border:rgba(28,26,20,.12); --accent:#a5701f; --accent-2:#2c6d8f; --accent-ink:#ffffff; --header-bg:rgba(246,244,239,.9); --nav-link:#1c1a14; --input-bg:#efeadf; --input-bg-focus:#ffffff; --cta-bg:linear-gradient(120deg,#151b20,#233042); --shadow-sm:0 2px 12px rgba(28,26,20,.08); --shadow:0 22px 55px -22px rgba(28,26,20,.22); --shadow-lg:0 45px 90px -32px rgba(28,26,20,.28); } html[data-theme="light"] body{background: radial-gradient(1200px 620px at 86% -10%,rgba(165,112,31,.07),transparent 60%), radial-gradient(950px 520px at -8% 20%,rgba(44,109,143,.07),transparent 60%), var(--bg)} /* footer stays dark in both modes — re-scope its palette locally */ html[data-theme="light"] .site-footer{--text:#eef2f0;--muted:#8fa0a8;--border:rgba(238,242,240,.10); background:#151b20;border-top-color:rgba(238,242,240,.10)} html[data-theme="light"] .pill{background:#fffdf8;box-shadow:var(--shadow-sm)} html[data-theme="light"] .hero__overlay{background:linear-gradient(105deg,rgba(6,9,11,.9) 10%,rgba(6,9,11,.58) 54%,rgba(6,9,11,.24) 100%)} html[data-theme="light"] .section--dark{--text:#eef2f0;--muted:#8fa0a8;--border:rgba(238,242,240,.10);--surface:#12171b;--surface-2:#181f24;background:#0a0e11;color:#eef2f0} /* theme toggle icons: dark default shows the sun (switch to light) */ .theme-toggle .i-moon{display:none} html[data-theme="light"] .theme-toggle .i-sun{display:none} html[data-theme="light"] .theme-toggle .i-moon{display:block}