/* ============================================================
   EASY FORWARD — DESIGN TOKENS v1  (shared)
   Single source of truth. Light default · Dark ready.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  /* Brand */
  --teal:#05A7A0; --navy:#10243E; --amber:#FFB703;
  /* Teal ramp */
  --teal-50:#E6F6F5; --teal-100:#C9ECEA; --teal-200:#98DCD8; --teal-300:#5FC7C1;
  --teal-400:#21B0A8; --teal-500:#05A7A0; --teal-600:#058C86; --teal-700:#06706B;
  --teal-800:#085653; --teal-900:#0A3F3D;
  /* Navy / neutral ramp (tinted, never pure gray) */
  --navy-50:#EEF2F6; --navy-100:#DCE3EB; --navy-200:#B9C6D3; --navy-300:#8FA0B2;
  --navy-400:#5F7486; --navy-500:#44586B; --navy-600:#2D3E52; --navy-700:#1F3047;
  --navy-800:#1A2A3D; --navy-900:#10243E; --navy-950:#0B1828;
  /* Amber ramp */
  --amber-300:#FFD566; --amber-400:#FFC533; --amber-500:#FFB703; --amber-600:#E0A000; --amber-700:#B37F00;
  /* Status — courier */
  --st-green-bg:#E8F5E9; --st-green-bd:#4CAF50; --st-green-tx:#1B5E20;
  --st-amber-bg:#FFF8E1; --st-amber-bd:#FFB703; --st-amber-tx:#7A5500;
  --st-red-bg:#FFEBEE;   --st-red-bd:#E53935;   --st-red-tx:#7F0000;
  --st-blue-bg:#E3F2FD;  --st-blue-bd:#1976D2;  --st-blue-tx:#0D47A1;
  --st-gray-bg:#ECEFF1;  --st-gray-bd:#90A4AE;  --st-gray-tx:#37474F;
  /* Spacing (4px base) */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px;
  --sp-8:32px; --sp-10:40px; --sp-12:48px; --sp-16:64px;
  /* Radii */
  --r-sm:4px; --r-md:6px; --r-lg:8px; --r-xl:12px; --r-2xl:16px; --r-full:9999px;
  /* Type */
  --font-sans:"IBM Plex Sans",system-ui,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,monospace;
  /* Motion */
  --ease-standard:cubic-bezier(.2,0,0,1);
  --ease-out:cubic-bezier(0,0,.2,1);
  --dur-1:100ms; --dur-2:150ms; --dur-3:200ms; --dur-4:300ms;
  /* Semantic — LIGHT */
  --bg:var(--navy-50); --surface:#FFFFFF; --surface-2:#F7FAFC; --surface-sunken:#EEF2F6;
  --border:#DCE3EB; --border-strong:#B9C6D3;
  --text:var(--navy-900); --text-2:var(--navy-600); --text-3:var(--navy-400);
  --accent:var(--teal-500); --accent-hover:var(--teal-600); --accent-active:var(--teal-700);
  --on-accent:#FFFFFF; --ring:rgba(5,167,160,.32);
  --danger:#E53935; --danger-bg:#FFEBEE; --danger-ring:rgba(229,57,53,.28);
  /* Elevation (navy-tinted) */
  --sh-xs:0 1px 2px rgba(16,36,62,.06);
  --sh-sm:0 1px 3px rgba(16,36,62,.08), 0 1px 2px rgba(16,36,62,.06);
  --sh-md:0 4px 12px rgba(16,36,62,.10), 0 2px 4px rgba(16,36,62,.06);
  --sh-lg:0 12px 32px rgba(16,36,62,.14), 0 4px 8px rgba(16,36,62,.06);
}
html[data-theme="dark"]{
  --bg:var(--navy-950); --surface:#13243A; --surface-2:#172B43; --surface-sunken:#0E1C30;
  --border:#22354C; --border-strong:#2D4159;
  --text:#EAF1F7; --text-2:#A9BACB; --text-3:#6E8298;
  --accent:var(--teal-400); --accent-hover:var(--teal-300); --accent-active:#7AD3CD;
  --on-accent:#06201F; --ring:rgba(33,176,168,.42);
  --danger:#FF6B66; --danger-bg:#3A1B1C; --danger-ring:rgba(255,107,102,.32);
  --sh-xs:0 1px 2px rgba(0,0,0,.4);
  --sh-sm:0 1px 3px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.35);
  --sh-md:0 4px 12px rgba(0,0,0,.5), 0 2px 4px rgba(0,0,0,.35);
  --sh-lg:0 12px 32px rgba(0,0,0,.6), 0 4px 8px rgba(0,0,0,.4);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font-sans);background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;line-height:1.5;
  transition:background var(--dur-3) var(--ease-standard),color var(--dur-3) var(--ease-standard);}
.mono{font-family:var(--font-mono)}

/* ---------- Shared shell ---------- */
.shell{display:grid;grid-template-columns:248px 1fr;min-height:100vh;background:var(--bg)}
.nav{position:sticky;top:0;align-self:start;height:100vh;overflow-y:auto;background:var(--surface);
  border-right:1px solid var(--border);padding:var(--sp-6) var(--sp-5);display:flex;flex-direction:column;gap:2px}
.nav-brand{display:flex;align-items:center;gap:10px;margin-bottom:var(--sp-5)}
.nav-brand .wm{display:flex;flex-direction:column;line-height:1.05}
.nav-brand .wm b{font-weight:700;font-size:16px;letter-spacing:-.01em}
.nav-brand .wm b span{color:var(--accent)}
.nav-brand .wm small{font-size:10px;color:var(--text-3);font-family:var(--font-mono);letter-spacing:.04em;text-transform:uppercase}
.nav-label{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);margin:var(--sp-4) 0 2px;padding-left:10px}
.nav a{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text-2);font-size:13.5px;font-weight:500;
  padding:7px 10px;border-radius:var(--r-md);transition:background var(--dur-2) var(--ease-standard),color var(--dur-2) var(--ease-standard)}
.nav a:hover{background:var(--surface-sunken);color:var(--text)}
.nav a.page{color:var(--text);font-weight:600}
.nav a.page.active{background:var(--surface-sunken)}
.nav a .dot{width:6px;height:6px;border-radius:var(--r-full);background:var(--border-strong);flex:none}
.nav a:hover .dot,.nav a.active .dot{background:var(--accent)}
.nav-sep{height:1px;background:var(--border);margin:var(--sp-4) 0}

.main{background:var(--bg)}
.topbar{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;
  padding:var(--sp-4) var(--sp-10);background:color-mix(in srgb,var(--bg) 86%,transparent);
  backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid var(--border)}
.topbar .crumb{font-family:var(--font-mono);font-size:12px;color:var(--text-3);letter-spacing:.02em}
.topbar .crumb b{color:var(--text-2);font-weight:500}
.theme-toggle{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--border);background:var(--surface);
  color:var(--text-2);padding:7px 12px;border-radius:var(--r-full);font-size:12.5px;font-weight:600;cursor:pointer;
  font-family:var(--font-sans);transition:all var(--dur-2) var(--ease-standard)}
.theme-toggle:hover{border-color:var(--border-strong);color:var(--text)}
.theme-toggle svg{width:15px;height:15px}

.wrap{max-width:1080px;padding:0 var(--sp-10) var(--sp-16)}
section{padding-top:var(--sp-12);scroll-margin-top:72px}
.sec-head{display:flex;align-items:baseline;gap:var(--sp-3);margin-bottom:var(--sp-2)}
.sec-kicker{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);font-weight:600}
h2.sec-title{font-size:28px;font-weight:700;letter-spacing:-.02em;line-height:1.15}
.sec-desc{font-size:15px;color:var(--text-2);max-width:64ch;margin-bottom:var(--sp-5);text-wrap:pretty}
h3.sub{font-size:13px;font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.06em;color:var(--text-3);margin:var(--sp-6) 0 var(--sp-4);font-weight:600}

.copied-toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--navy-900);color:#fff;
  padding:10px 18px;border-radius:var(--r-full);font-size:13px;font-weight:500;font-family:var(--font-mono);box-shadow:var(--sh-lg);
  opacity:0;pointer-events:none;transition:all var(--dur-3) var(--ease-out);z-index:50}
.copied-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
html[data-theme="dark"] .copied-toast{background:var(--teal-500);color:var(--navy-950)}