/* ================================================================= *
 *  Theme Tanker - brand style guide template.
 *  The doc CHROME toggles light (default) / dark. The design system
 *  being documented keeps its own colours in swatches and in the
 *  component canvas (--t-* tokens set per theme by theme.js).
 * ================================================================= */

:root {
  /* chrome - light (default) */
  --doc-bg:#FFFFFF; --doc-panel:#FAF9F6; --doc-panel-2:#F2F1EC;
  --doc-text:#17181B; --doc-muted:#6B7280; --doc-faint:#9AA0AA;
  --doc-line:#E7E6E1; --doc-line-2:#DAD9D3;
  --mono:"IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --sans:system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --wrap:1080px;
  color-scheme: light;
}
:root[data-doc="dark"] {
  --doc-bg:#0C0D10; --doc-panel:#15161B; --doc-panel-2:#1D1F26;
  --doc-text:#ECEDF1; --doc-muted:#9BA0AB; --doc-faint:#6C717C;
  --doc-line:rgba(255,255,255,.10); --doc-line-2:rgba(255,255,255,.16);
  color-scheme: dark;
}

* { box-sizing:border-box; }
body {
  margin:0; background:var(--doc-bg); color:var(--doc-text); font-family:var(--sans);
  line-height:1.55; -webkit-font-smoothing:antialiased; transition:background .2s ease, color .2s ease;
}
a { color:inherit; text-decoration:none; }
.wrap { width:100%; max-width:var(--wrap); margin:0 auto; padding:0 24px; }
.mono { font-family:var(--mono); }
.gkick { font-family:var(--mono); font-size:.72rem; letter-spacing:.15em; text-transform:uppercase; color:var(--doc-faint); }

/* top bar */
.gbar { position:sticky; top:0; z-index:10; background:color-mix(in srgb, var(--doc-bg) 88%, transparent);
  backdrop-filter:saturate(1.3) blur(9px); border-bottom:1px solid var(--doc-line); }
.gbar-in { display:flex; align-items:center; gap:14px; height:58px; }
.gbar img { width:26px; height:26px; }
.gbar .back { font-family:var(--mono); font-size:.8rem; color:var(--doc-muted); }
.gbar .back:hover { color:var(--doc-text); }
.gbar .spacer { margin-left:auto; }
.gbadge { font-family:var(--mono); font-size:.64rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--doc-muted); border:1px solid var(--doc-line-2); border-radius:999px; padding:5px 11px; }
.theme-toggle { display:inline-flex; align-items:center; justify-content:center; line-height:0;
  padding:.4rem; border-radius:6px; border:1px solid var(--doc-line-2);
  background:transparent; color:var(--doc-muted); cursor:pointer; }
.theme-toggle:hover { color:var(--doc-text); }
/* show the glyph that switches TO the other mode: moon in light, sun in dark */
.theme-toggle .ico-sun { display:none; } .theme-toggle .ico-moon { display:inline; }
:root[data-doc="dark"] .theme-toggle .ico-sun { display:inline; } :root[data-doc="dark"] .theme-toggle .ico-moon { display:none; }

/* hero */
.ghero { padding:52px 0 40px; border-bottom:1px solid var(--doc-line); }
.ghero .gkick { display:block; margin-bottom:14px; color:var(--t-primary); }
.ghero h1 { font-family:var(--sans); font-weight:820; letter-spacing:-.03em; line-height:1.02;
  font-size:clamp(2.3rem,5vw,3.5rem); margin:0; }
.ghero .lead { max-width:62ch; margin:16px 0 0; color:var(--doc-muted); font-size:1.06rem; }
.chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:22px; }
.chip { font-family:var(--mono); font-size:.72rem; color:var(--doc-text);
  background:var(--doc-panel); border:1px solid var(--doc-line); border-radius:8px; padding:6px 11px; }
.chip b { color:var(--t-primary); font-weight:600; }

/* palette cargo load 2 / 3 / 6 */
.load { display:grid; gap:6px; justify-items:center; margin:30px auto 4px; max-width:560px; }
.load-row { display:grid; gap:6px; width:100%; }
.load-2 { grid-template-columns:repeat(2,1fr); width:42%; }
.load-3 { grid-template-columns:repeat(3,1fr); width:66%; }
.load-6 { grid-template-columns:repeat(6,1fr); }
.load span { height:34px; border-radius:5px; box-shadow:inset 0 0 0 1px rgba(128,128,128,.28); }
.load-cap { font-family:var(--mono); font-size:.7rem; color:var(--doc-faint); text-align:center; }

/* sections */
.gsec { padding:44px 0; border-bottom:1px solid var(--doc-line); }
.gsec h2 { font-family:var(--sans); font-weight:760; letter-spacing:-.02em; font-size:1.5rem; margin:6px 0 0; }
.gsec .sub { color:var(--doc-muted); margin:10px 0 26px; max-width:66ch; }

/* palette tokens */
.grp + .grp { margin-top:24px; }
.grp-label { font-family:var(--mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--doc-faint); margin:0 0 12px; }
.tokens { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; }
.token { background:var(--doc-panel); border:1px solid var(--doc-line); border-radius:10px; overflow:hidden; cursor:pointer; transition:border-color .15s ease; }
.token:hover { border-color:var(--doc-line-2); }
.token .sw { height:62px; box-shadow:inset 0 -1px 0 rgba(128,128,128,.18); }
.token .meta { padding:9px 12px; }
.token .role { font-size:.82rem; font-weight:600; }
.token .hex { font-family:var(--mono); font-size:.72rem; color:var(--doc-muted); }
.token .var { font-family:var(--mono); font-size:.66rem; color:var(--doc-faint); }
.token.copied .role::after { content:" ✓ copied"; color:var(--t-accent); font-weight:600; }

/* type specimen */
.type-families { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:22px; }
.fam { background:var(--doc-panel); border:1px solid var(--doc-line); border-radius:10px; padding:15px; }
.fam .lbl { font-family:var(--mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--doc-faint); }
.fam .name { font-size:1.12rem; font-weight:700; margin-top:4px; }
.fam .wt { font-family:var(--mono); font-size:.7rem; color:var(--doc-muted); margin-top:6px; }
.type-row { display:flex; align-items:baseline; gap:18px; padding:12px 0; border-bottom:1px dashed var(--doc-line); flex-wrap:wrap; }
.type-row:last-child { border-bottom:0; }
.type-row .spec { font-family:var(--mono); font-size:.72rem; color:var(--doc-faint); width:120px; flex:0 0 auto; }

/* spacing ramp */
.ramp { display:grid; gap:9px; }
.ramp .step { display:flex; align-items:center; gap:14px; }
.ramp .bar { height:15px; background:var(--t-primary); border-radius:3px; min-width:2px; }
.ramp .lbl { font-family:var(--mono); font-size:.73rem; color:var(--doc-muted); width:160px; flex:0 0 auto; }

/* shape */
.shape-row { display:flex; flex-wrap:wrap; gap:14px; }
.shape { width:120px; height:76px; background:var(--doc-panel); border:1px solid var(--doc-line-2); display:grid; place-items:center;
  font-family:var(--mono); font-size:.72rem; color:var(--doc-muted); }

/* motion */
.motion-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:14px; }
.motion-card { background:var(--doc-panel); border:1px solid var(--doc-line); border-radius:10px; padding:16px; }
.motion-card h3 { font-family:var(--sans); font-size:1rem; font-weight:680; margin:0; }
.motion-card .t { font-family:var(--mono); font-size:.71rem; color:var(--doc-muted); margin-top:7px; }
.motion-card .demo { margin-top:13px; height:30px; border-radius:6px; background:var(--doc-panel-2); }
.motion-card .demo.sk { background:linear-gradient(90deg,var(--doc-panel-2) 25%,var(--doc-line-2) 37%,var(--doc-panel-2) 63%);
  background-size:400% 100%; animation:tt-sk 1600ms cubic-bezier(.37,0,.63,1) infinite; }
@keyframes tt-sk { 0%{background-position:100% 0} 100%{background-position:0 0} }

/* ---- the component canvas: rendered IN the documented theme ---- */
.canvas { background:var(--t-bg); color:var(--t-text); border:1px solid var(--doc-line-2);
  border-radius:14px; padding:26px; }
.canvas-note { font-family:var(--mono); font-size:.68rem; color:var(--doc-faint); margin:0 0 14px; }
.comp-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:16px; }
.panel { background:var(--t-surface); border:1px solid var(--t-border); border-radius:var(--t-radius); padding:16px; }
.panel .plbl { font-family:var(--mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--t-muted); margin-bottom:12px; }
.tbtn { display:inline-flex; align-items:center; justify-content:center; font-weight:600; font-size:.9rem;
  padding:9px 15px; border-radius:var(--t-radius); border:1px solid transparent; cursor:pointer; }
.tbtn-primary { background:var(--t-cta); color:#fff; }
.tbtn-secondary { background:transparent; color:var(--t-text); border-color:var(--t-border); }
.tbtn-ghost { background:color-mix(in srgb, var(--t-primary) 14%, transparent); color:var(--t-primary); }
.tfield { width:100%; background:var(--t-bg); border:1px solid var(--t-border); border-radius:var(--t-radius);
  color:var(--t-text); padding:9px 12px; font-family:var(--sans); }
.tfield::placeholder { color:var(--t-muted); }
.tbadges { display:flex; gap:8px; flex-wrap:wrap; }
.tstatus { font-family:var(--mono); font-size:.71rem; padding:4px 10px; border-radius:999px; display:inline-flex; align-items:center; gap:6px; }
.tdot { width:9px; height:9px; border-radius:50%; }
.tmetric { font-weight:820; font-size:1.7rem; color:var(--t-text); }
.tmuted { color:var(--t-muted); font-size:.85rem; }

/* a11y */
.a11y-grade { display:inline-flex; align-items:center; gap:12px; font-weight:800; font-size:1.3rem; }
.a11y-grade .g { background:var(--t-accent); color:#0b0b0b; border-radius:8px; padding:2px 12px; }
.a11y-list { margin:16px 0 0; padding:0; list-style:none; display:grid; gap:10px; }
.a11y-list li { color:var(--doc-muted); padding-left:26px; position:relative; }
.a11y-list li::before { content:"✓"; position:absolute; left:0; color:var(--t-accent); font-weight:700; }

.gfoot { padding:32px 0 48px; color:var(--doc-faint); font-family:var(--mono); font-size:.77rem; }
.gfoot a { color:var(--t-primary); }

@media (max-width:600px){ .type-families{grid-template-columns:1fr} .ramp .lbl{width:130px} }
@media (prefers-reduced-motion:reduce){ .motion-card .demo.sk{animation:none} * { transition:none !important; } }