/* ═══════════════════════════════════════════════════════════════
   GFS BRAND SYSTEM v10.0 — COMPLETE DESIGN PACKAGE
   Global Food Solutions, Inc.
   Classification: Internal Use Only
   Version 9.0 / May 2026
   ═══════════════════════════════════════════════════════════════ */

:root {
  --cobalt:#092F64; --navy:#1A5799; --tufts:#468BE6; --jordy:#93BFEF;
  --alice:#E9F5FF; --ice:#F4F9FF; --midnight:#051B3A;
  --black:#1F1F1F; --charcoal:#2D2D2D; --graphite:#4B5F7A; --slate:#6B7280;
  --steel:#9CA3AF; --silver:#D9E1EA; --fog:#F0F2F5; --white:#FFFFFF;
  --success:#0F766E; --success-bg:#F0FDF4; --warning:#B45309; --warning-bg:#FFFBEB;
  --error:#DC2626; --error-bg:#FEF2F2; --info:#1A5799; --info-bg:#E9F5FF;
  --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; --sp-20:80px; --sp-24:96px;
  --text-3xs:9px; --text-2xs:10px; --text-xs:11px; --text-sm:13px; --text-base:15px; --text-lg:17px; --text-xl:20px;
  --text-2xl:24px; --text-3xl:32px; --text-4xl:40px; --text-5xl:56px; --text-6xl:72px; --text-7xl:96px;
  --radius-sm:2px; --radius-md:4px; --radius-lg:8px;
  --ease-out:cubic-bezier(0.16,1,0.3,1); --ease-in-out:cubic-bezier(0.65,0,0.35,1);
  --spring:cubic-bezier(0.34,1.56,0.64,1);
  --dur-fast:120ms; --dur-base:200ms; --dur-med:300ms; --dur-slow:400ms; --dur-slower:600ms;
  --shadow-sm:0 1px 2px rgba(9,47,100,0.06);
  --shadow-md:0 2px 8px rgba(9,47,100,0.08);
  --shadow-lg:0 8px 24px rgba(9,47,100,0.12);
  --shadow-xl:0 16px 48px rgba(9,47,100,0.16);

  /* ── SEMANTIC TOKENS (shadcn-inspired) ── */
  --background: var(--white);
  --foreground: var(--black);
  --card: var(--white);
  --card-foreground: var(--black);
  --primary: var(--cobalt);
  --primary-foreground: #FFFFFF;
  --secondary: var(--fog);
  --secondary-foreground: var(--graphite);
  --muted: var(--fog);
  --muted-foreground: var(--slate);
  --accent: var(--alice);
  --accent-foreground: var(--cobalt);
  --destructive: var(--error);
  --destructive-foreground: #FFFFFF;
  --border: var(--silver);
  --input: var(--silver);
  --ring: var(--tufts);

  /* ── CHART TOKENS ── */
  --chart-1: var(--cobalt);
  --chart-2: var(--navy);
  --chart-3: var(--tufts);
  --chart-4: var(--jordy);
  --chart-5: var(--alice);

  /* ── SIDEBAR TOKENS ── */
  --sidebar-background: var(--white);
  --sidebar-foreground: var(--graphite);
  --sidebar-primary: var(--cobalt);
  --sidebar-primary-foreground: #FFFFFF;
  --sidebar-accent: var(--ice);
  --sidebar-accent-foreground: var(--cobalt);
  --sidebar-border: var(--silver);
  --sidebar-ring: var(--tufts);
}
[data-theme="dark"]{
  --cobalt:#93BFEF; --navy:#468BE6; --tufts:#6BA3ED; --jordy:#1A5799;
  --alice:#0A1929; --ice:#0D1F33; --midnight:#F4F9FF;
  --black:#F0F2F5; --charcoal:#E5E7EB; --graphite:#9CA3AF; --slate:#6B7280;
  --steel:#4B5F7A; --silver:#2D2D2D; --fog:#1A1A1A; --white:#111111;
  --success:#34D399; --success-bg:#0A1F15; --warning:#FBBF24; --warning-bg:#1F1A0A;
  --error:#F87171; --error-bg:#1F0A0A; --info:#6BA3ED; --info-bg:#0A1929;
  --shadow-sm:0 1px 2px rgba(0,0,0,0.3); --shadow-md:0 2px 8px rgba(0,0,0,0.4);
  --shadow-lg:0 8px 24px rgba(0,0,0,0.5); --shadow-xl:0 16px 48px rgba(0,0,0,0.6);
  --text-3xs:9px; --text-2xs:10px;

  --background: var(--white);
  --foreground: var(--black);
  --card: var(--white);
  --card-foreground: var(--black);
  --primary: var(--cobalt);
  --primary-foreground: #111111;
  --secondary: var(--fog);
  --secondary-foreground: var(--graphite);
  --muted: var(--fog);
  --muted-foreground: var(--slate);
  --accent: var(--alice);
  --accent-foreground: var(--cobalt);
  --destructive: var(--error);
  --destructive-foreground: #FFFFFF;
  --border: var(--silver);
  --input: var(--silver);
  --ring: var(--tufts);
  --sidebar-background: var(--fog);
  --sidebar-foreground: var(--graphite);
  --sidebar-primary: var(--cobalt);
  --sidebar-accent: var(--alice);
  --sidebar-border: var(--silver);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scroll-padding-top:48px;}
body{font-family:'Inter',sans-serif;font-size:var(--text-base);line-height:1.6;color:var(--black);background:var(--white);transition:background var(--dur-slow),color var(--dur-slow);}
::selection{background:var(--alice);color:var(--cobalt);}

/* ══════════════════════════════════════════════════
   GFS BRAND DNA — Unique Identity Elements
   These apply across ALL pages automatically.
   ══════════════════════════════════════════════════ */

/* Subtle dot-matrix watermark on every page */
.page::before {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image: radial-gradient(circle, var(--cobalt) 0.5px, transparent 0.5px);
  background-size: 32px 32px;
  opacity: 0.012;
  pointer-events: none;
  z-index: -1;
}

/* Corner brackets on every section (subtle, brand DNA) */
.s { position: relative; }
.s::before, .s::after {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  pointer-events: none;
  opacity: 0.15;
}
.s::before {
  top: -1px; left: -1px;
  border-top: 1.5px solid var(--cobalt);
  border-left: 1.5px solid var(--cobalt);
}
.s::after {
  bottom: -1px; right: -1px;
  border-bottom: 1.5px solid var(--cobalt);
  border-right: 1.5px solid var(--cobalt);
}

/* GFS signal accent on section numbers */
.s-num::before {
  content: '■';
  color: var(--tufts);
  font-size: 6px;
  margin-right: 4px;
  vertical-align: middle;
}

/* Brand DNA on buttons — subtle cold chain accent */
.btn-primary {
  position: relative;
  overflow: hidden;
}
.btn-primary::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 3px;
  height: 100%;
  background: linear-gradient(180deg, var(--tufts), var(--jordy));
  opacity: 0.5;
}

/* ── SKIP TO CONTENT (accessibility) ── */
.skip-link{position:absolute;top:-100%;left:var(--sp-4);background:var(--cobalt);color:var(--white);padding:var(--sp-3) var(--sp-5);font-family:'IBM Plex Mono',monospace;font-size:var(--text-xs);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;z-index:200;border-radius:0 0 var(--radius-sm) var(--radius-sm);transition:top var(--dur-base);}
.skip-link:focus{top:0;}

/* ── FOCUS VISIBLE (keyboard-only focus) ── */
:focus:not(:focus-visible){outline:none;}
:focus-visible{outline:2px solid var(--tufts);outline-offset:2px;border-radius:var(--radius-sm);}
button:focus-visible,.btn:focus-visible{box-shadow:0 0 0 3px var(--alice),0 0 0 5px var(--tufts);}
input:focus-visible,select:focus-visible,textarea:focus-visible{border-color:var(--tufts);box-shadow:0 0 0 3px var(--alice);}

/* ── CUSTOM SCROLLBAR ── */
/* Scrollbar — all browsers */
* { scrollbar-width: thin; scrollbar-color: var(--silver) var(--fog); }
[data-theme="dark"] * { scrollbar-color: var(--graphite) var(--fog); }
::-webkit-scrollbar{width:8px;height:8px;}
::-webkit-scrollbar-track{background:var(--fog);}
::-webkit-scrollbar-thumb{background:var(--silver);border-radius:4px;}
::-webkit-scrollbar-thumb:hover{background:var(--steel);}
[data-theme="dark"] ::-webkit-scrollbar-track{background:var(--fog);}
[data-theme="dark"] ::-webkit-scrollbar-thumb{background:var(--graphite);}

/* ── BACK TO TOP BUTTON ── */
.back-to-top{position:fixed;bottom:var(--sp-6);right:var(--sp-6);width:40px;height:40px;background:var(--cobalt);color:var(--white);border:none;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:all var(--dur-med) var(--ease-out);z-index:90;box-shadow:var(--shadow-md);}
.back-to-top.visible{opacity:1;visibility:visible;}
.back-to-top:hover{background:var(--navy);transform:translateY(-2px);box-shadow:var(--shadow-lg);}
.back-to-top svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}

/* ── READING PROGRESS BAR ── */
/* Reading progress sits below topbar, not overlapping */
.reading-progress{position:fixed;top:42px;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--cobalt),var(--tufts));z-index:90;pointer-events:none;transform-origin:left;transform:scaleX(0);will-change:transform;}

/* ── SECTION ANCHOR LINKS ── */
.s-head .anchor-link{opacity:0;margin-left:var(--sp-2);color:var(--tufts);text-decoration:none;font-weight:400;transition:opacity var(--dur-fast);}
.s-head:hover .anchor-link{opacity:1;}
.s-head .anchor-link:hover{text-decoration:underline;}

/* ── TOPBAR ── */
/* Topbar: sticky, always on top, proper height for scroll-padding */
.topbar{position:sticky;top:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:var(--sp-3) var(--sp-6);background:var(--cobalt);color:var(--white);font-family:'IBM Plex Mono',monospace;font-size:var(--text-xs);letter-spacing:.08em;text-transform:uppercase;border-bottom:1px solid var(--navy);backdrop-filter:blur(8px);min-height:42px;}
[data-theme="dark"] .topbar{background:#0A1929;color:#93BFEF;border-color:#1A3A5C;}
.topbar-l,.topbar-r{display:flex;align-items:center;gap:var(--sp-4);}
.dot-live{width:6px;height:6px;border-radius:50%;background:#34D399;animation:pulse 2s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
.topbar-btn{background:none;border:1px solid currentColor;color:inherit;font:inherit;letter-spacing:inherit;text-transform:inherit;padding:3px 10px;cursor:pointer;border-radius:var(--radius-sm);transition:background var(--dur-fast);}
.topbar-btn:hover{background:rgba(255,255,255,.12);}
.topbar-r input::placeholder { color: rgba(255,255,255,0.5); }
[data-theme="dark"] .topbar-r input::placeholder { color: rgba(147,191,239,0.5); }

/* ── TABLE OF CONTENTS SIDEBAR ── */
.toc{position:fixed;left:0;top:42px;width:240px;height:calc(100vh - 42px);overflow-y:auto;background:var(--white);border-right:1px solid var(--silver);padding:var(--sp-4) 0;z-index:50;transform:translateX(-100%);transition:transform var(--dur-med) var(--ease-out);font-family:'IBM Plex Mono',monospace;font-size:10px;}
.toc.open{transform:translateX(0);}
.toc a{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-1) var(--sp-4);color:var(--slate);text-decoration:none;letter-spacing:.04em;transition:all var(--dur-fast);}
.toc a:hover{color:var(--cobalt);background:var(--ice);}
.toc a .toc-num{color:var(--tufts);min-width:24px;font-weight:600;}
.toc-group{padding:var(--sp-2) var(--sp-4);color:var(--steel);text-transform:uppercase;letter-spacing:.1em;font-weight:600;font-size:9px;margin-top:var(--sp-3);}

/* ── SCROLL NAV DOTS ── */
.scroll-nav{position:fixed;right:var(--sp-4);top:50%;transform:translateY(-50%);z-index:50;display:flex;flex-direction:column;gap:3px;}
.scroll-nav a{width:5px;height:5px;background:var(--silver);border-radius:50%;display:block;transition:all var(--dur-fast) var(--ease-out);}
.scroll-nav a:hover,.scroll-nav a.active{background:var(--tufts);transform:scale(1.8);}

/* ── PAGE ── */
.page{max-width:1440px;margin:0 auto;padding:var(--sp-8);}

/* ── SECTIONS ── */
.s{border:1px solid var(--silver);margin-bottom:var(--sp-5);background:var(--white);transition:background var(--dur-slow),border-color var(--dur-slow);}
.s-head{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--sp-6);border-bottom:1px solid var(--silver);font-family:'IBM Plex Mono',monospace;font-size:var(--text-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--graphite);cursor:pointer;user-select:none;transition:background var(--dur-fast);}
.s-head:hover{background:var(--ice);}
.s-head::after{content:'';width:8px;height:8px;border-right:2px solid var(--steel);border-bottom:2px solid var(--steel);transform:rotate(45deg);transition:transform var(--dur-base);flex-shrink:0;margin-left:auto;}
.s.collapsed .s-head::after{transform:rotate(-45deg);}
.s.collapsed .s-body,.s.collapsed .s-note{max-height:0;opacity:0;overflow:hidden;padding-top:0;padding-bottom:0;margin:0;}
.s.collapsed .s-head{border-bottom-color:transparent;}
.s-num{font-weight:700;color:var(--cobalt);min-width:24px;}
.s-title{flex:1;}
.s-meta{font-size:var(--text-xs);color:var(--steel);}
.s-body{padding:var(--sp-8);}
.s-note{padding:var(--sp-4) var(--sp-6);background:var(--ice);border-top:1px solid var(--silver);font-family:'IBM Plex Mono',monospace;font-size:var(--text-xs);color:var(--graphite);}

/* ── CORNER BRACKETS ── */
.bracket{position:relative;}
.bracket::before,.bracket::after{content:'';position:absolute;width:14px;height:14px;border-color:var(--cobalt);border-style:solid;pointer-events:none;z-index:1;}
.bracket::before{top:-1px;left:-1px;border-width:2px 0 0 2px;}
.bracket::after{bottom:-1px;right:-1px;border-width:0 2px 2px 0;}

/* ── GRIDS ── */
.g2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-6);}
.g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-6);}
.g4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-6);}
.g5{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--sp-6);}
.g6{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--sp-6);}
.g8{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:var(--sp-4);}

@media(max-width:1024px){.g4,.g5,.g6,.g8{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media(max-width:768px){.g2,.g3,.g4,.g5,.g6,.g8{grid-template-columns:1fr;}.page{padding:var(--sp-4);}.hero-section{grid-template-columns:1fr !important;}.hero-title{font-size:var(--text-5xl) !important;}.scroll-nav{display:none;}}

/* ── HELPERS ── */
.mono{font-family:'IBM Plex Mono',monospace;}
.label{font-family:'IBM Plex Mono',monospace;font-size:var(--text-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--slate);}
.divider{border:none;border-top:1px solid var(--silver);margin:var(--sp-6) 0;}
.sub-label{font-family:'IBM Plex Mono',monospace;font-size:var(--text-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--graphite);margin-bottom:var(--sp-3);padding-bottom:var(--sp-2);border-bottom:1px solid var(--silver);}
.flex{display:flex;}.flex-wrap{flex-wrap:wrap;}.items-center{align-items:center;}.gap-2{gap:var(--sp-2);}.gap-3{gap:var(--sp-3);}.gap-4{gap:var(--sp-4);}.gap-6{gap:var(--sp-6);}
.mt-2{margin-top:var(--sp-2);}.mt-4{margin-top:var(--sp-4);}.mt-6{margin-top:var(--sp-6);}.mt-8{margin-top:var(--sp-8);}.mb-4{margin-bottom:var(--sp-4);}.mb-6{margin-bottom:var(--sp-6);}

/* ── COPY TOAST ── */
.toast{position:fixed;bottom:var(--sp-6);left:50%;transform:translateX(-50%) translateY(20px);background:var(--cobalt);color:var(--white);font-family:'IBM Plex Mono',monospace;font-size:var(--text-xs);letter-spacing:.06em;text-transform:uppercase;padding:var(--sp-2) var(--sp-5);border-radius:var(--radius-sm);opacity:0;transition:all var(--dur-base) var(--ease-out);pointer-events:none;z-index:200;}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

/* ══════════════════════════════════════════════════
   HERO
   ══════════════════════════════════════════════════ */
.hero-section{border:1px solid var(--silver);margin-bottom:var(--sp-5);display:grid;grid-template-columns:1.15fr .85fr;min-height:560px;overflow:hidden;position:relative;background:var(--white);}
.hero-left{padding:var(--sp-12) var(--sp-8);display:flex;flex-direction:column;justify-content:center;position:relative;}
.hero-eyebrow{font-family:'IBM Plex Mono',monospace;font-size:var(--text-xs);letter-spacing:.15em;text-transform:uppercase;color:var(--graphite);margin-bottom:var(--sp-6);display:flex;align-items:center;gap:var(--sp-3);}
.hero-eyebrow span{display:inline-block;width:40px;height:2px;background:var(--cobalt);}
.hero-title{font-size:var(--text-7xl);font-weight:900;line-height:.9;letter-spacing:-.035em;color:var(--cobalt);margin-bottom:var(--sp-5);}
.hero-tagline{font-family:'IBM Plex Mono',monospace;font-size:var(--text-sm);letter-spacing:.12em;text-transform:uppercase;color:var(--graphite);border-left:3px solid var(--tufts);padding-left:var(--sp-4);}
.hero-desc{font-size:var(--text-base);color:var(--graphite);margin-top:var(--sp-5);max-width:480px;line-height:1.7;}
.hero-pillars{display:flex;gap:var(--sp-5);margin-top:var(--sp-8);font-family:'IBM Plex Mono',monospace;font-size:var(--text-xs);letter-spacing:.06em;text-transform:uppercase;color:var(--slate);}
.hero-pillars span::before{content:'■';color:var(--tufts);margin-right:var(--sp-2);font-size:8px;vertical-align:middle;}
.hero-right{background:var(--ice);display:grid;grid-template-rows:auto 1fr auto;align-items:center;justify-items:center;position:relative;border-left:1px solid var(--silver);overflow:hidden;padding:var(--sp-6);gap:var(--sp-4);}

/* Globe — centered in middle row */
.globe{width:200px;height:200px;position:relative;order:2;}
.globe-ring{position:absolute;border:1px solid var(--jordy);border-radius:50%;}
.globe-ring:nth-child(1){width:200px;height:200px;top:0;left:0;animation:grot 25s linear infinite;}
.globe-ring:nth-child(2){width:164px;height:164px;top:18px;left:18px;border-color:var(--tufts);animation:grot 18s linear infinite reverse;}
.globe-ring:nth-child(3){width:128px;height:128px;top:36px;left:36px;animation:grot 30s linear infinite;}
.globe-ring:nth-child(4){width:92px;height:92px;top:54px;left:54px;border-color:var(--navy);animation:grot 22s linear infinite reverse;}
.globe-ring:nth-child(5){width:56px;height:56px;top:72px;left:72px;border-color:var(--jordy);animation:grot 15s linear infinite;opacity:.5;}
.globe-dot{position:absolute;width:6px;height:6px;background:var(--tufts);border-radius:50%;animation:dpulse 3s ease-in-out infinite;}
.globe-dot:nth-child(6){top:46px;left:130px;}
.globe-dot:nth-child(7){top:100px;left:22px;animation-delay:.6s;}
.globe-dot:nth-child(8){top:142px;left:112px;animation-delay:1.2s;}
.globe-dot:nth-child(9){top:76px;left:170px;animation-delay:1.8s;}
.globe-dot:nth-child(10){top:28px;left:64px;animation-delay:2.4s;width:4px;height:4px;}
.globe-dot:nth-child(11){top:170px;left:76px;animation-delay:.3s;width:4px;height:4px;}
.globe-line{position:absolute;background:var(--jordy);height:1px;transform-origin:left center;opacity:.3;}
@keyframes grot{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes dpulse{0%,100%{transform:scale(1);opacity:.7}50%{transform:scale(1.6);opacity:1}}

.hero-meta{font-family:'IBM Plex Mono',monospace;font-size:var(--text-xs);color:var(--slate);border:1px solid var(--silver);padding:var(--sp-3) var(--sp-4);line-height:1.8;background:var(--white);min-width:220px;justify-self:end;order:1;}
.hero-meta strong{color:var(--cobalt);display:inline-block;min-width:100px;}
.hero-meta-title{font-weight:700;color:var(--cobalt);letter-spacing:.06em;text-transform:uppercase;padding-bottom:var(--sp-2);border-bottom:1px solid var(--silver);margin-bottom:var(--sp-2);}

.hero-barcode{display:flex;gap:1px;height:28px;opacity:.4;justify-self:end;order:3;}
.hero-barcode div{background:var(--cobalt);}

.vert-text{position:absolute;left:var(--sp-4);top:50%;transform:rotate(-90deg) translateX(-50%);transform-origin:0 0;font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--steel);white-space:nowrap;}

/* ══════════════════════════════════════════════════
   VIBE SECTION
   ══════════════════════════════════════════════════ */
.vibe-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;}
.vibe-word{padding:var(--sp-8) var(--sp-6);border-right:1px solid var(--silver);text-align:center;transition:background var(--dur-base);}
.vibe-word:last-child{border-right:none;}
.vibe-word:hover{background:var(--ice);}
.vibe-word h3{font-size:var(--text-3xl);font-weight:800;color:var(--cobalt);margin-bottom:var(--sp-2);}
.vibe-word p{font-family:'IBM Plex Mono',monospace;font-size:var(--text-xs);color:var(--slate);letter-spacing:.05em;}

/* ══════════════════════════════════════════════════
   COLORS
   ══════════════════════════════════════════════════ */
.color-row{display:flex;gap:var(--sp-3);margin-bottom:var(--sp-5);}
.color-swatch{flex:1;cursor:pointer;transition:transform var(--dur-fast) var(--ease-out);}
.color-swatch:hover{transform:translateY(-3px);}
.color-block{height:72px;border-radius:var(--radius-sm);margin-bottom:var(--sp-1);border:1px solid rgba(0,0,0,.04);position:relative;overflow:hidden;}
.color-block::after{content:'COPY';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.1em;color:white;background:rgba(0,0,0,.4);opacity:0;transition:opacity var(--dur-fast);}
.color-swatch:hover .color-block::after{opacity:1;}
.color-name{font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--black);}
.color-hex{font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--slate);}
.color-usage-box{padding:var(--sp-5);background:var(--ice);border:1px solid var(--silver);font-family:'IBM Plex Mono',monospace;font-size:var(--text-xs);color:var(--graphite);line-height:2;}
.color-usage-box strong{color:var(--cobalt);}

.color-context{border:1px solid var(--silver);overflow:hidden;}
.color-context-bar{height:6px;}
.color-context-body{padding:var(--sp-5);}

/* ══════════════════════════════════════════════════
   TYPOGRAPHY
   ══════════════════════════════════════════════════ */
.type-specimen{padding:var(--sp-8);border:1px solid var(--silver);}
.type-label{font-family:'IBM Plex Mono',monospace;font-size:var(--text-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--slate);margin-bottom:var(--sp-4);display:flex;align-items:center;gap:var(--sp-3);}
.type-label::before{content:'';width:8px;height:8px;background:var(--cobalt);}
.scale-table{width:100%;border-collapse:collapse;}
.scale-table th,.scale-table td{font-family:'IBM Plex Mono',monospace;font-size:var(--text-xs);padding:var(--sp-3) var(--sp-4);text-align:left;border-bottom:1px solid var(--fog);}
.scale-table th{color:var(--graphite);text-transform:uppercase;letter-spacing:.06em;border-bottom:2px solid var(--silver);background:var(--fog);}
.scale-table .preview{font-family:'Inter',sans-serif;color:var(--black);}

.para-specimen{column-count:2;column-gap:var(--sp-8);font-size:var(--text-base);color:var(--graphite);line-height:1.75;margin-top:var(--sp-6);padding:var(--sp-6);border:1px solid var(--silver);}
.para-specimen .drop-cap::first-letter{font-size:3.5em;float:left;line-height:.8;margin-right:.1em;color:var(--cobalt);font-weight:800;}

/* ══════════════════════════════════════════════════
   SPACING
   ══════════════════════════════════════════════════ */
.spacing-demo{display:flex;align-items:flex-end;gap:var(--sp-3);padding:var(--sp-6) 0;}
.sp-block{display:flex;flex-direction:column;align-items:center;gap:var(--sp-2);}
.sp-vis{background:var(--tufts);opacity:.5;border-radius:var(--radius-sm);}
.sp-lbl{font-family:'IBM Plex Mono',monospace;font-size:9px;color:var(--slate);text-align:center;}
.sp-tok{font-weight:600;color:var(--cobalt);}

/* ══════════════════════════════════════════════════
   BORDERS & DIVIDERS
   ══════════════════════════════════════════════════ */
.border-demo{display:flex;flex-direction:column;gap:var(--sp-4);}
.border-row{display:flex;align-items:center;gap:var(--sp-4);}
.border-sample{flex:1;height:0;}
.border-sample-label{font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--slate);min-width:120px;}

/* ══════════════════════════════════════════════════
   ELEVATION
   ══════════════════════════════════════════════════ */
.elev-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-6);}
.elev-card{padding:var(--sp-8);border:1px solid var(--silver);text-align:center;transition:transform var(--dur-med) var(--ease-out);}
.elev-card:hover{transform:translateY(-4px);}
.elev-card-label{font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--slate);text-transform:uppercase;letter-spacing:.06em;margin-top:var(--sp-4);}

/* ══════════════════════════════════════════════════
   LOGO
   ══════════════════════════════════════════════════ */
.logo-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;}
.logo-cell{padding:var(--sp-8);border:1px solid var(--silver);margin:-.5px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:200px;}
.logo-cell-label{font-family:'IBM Plex Mono',monospace;font-size:var(--text-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--slate);margin-bottom:var(--sp-4);width:100%;text-align:left;}
.monogram{font-size:var(--text-4xl);font-weight:900;letter-spacing:.15em;color:var(--cobalt);}
.monogram-sub{font-family:'IBM Plex Mono',monospace;font-size:var(--text-xs);letter-spacing:.2em;text-transform:uppercase;color:var(--graphite);margin-top:var(--sp-2);}

.clearspace-box{border:2px dashed var(--jordy);padding:var(--sp-8);display:inline-flex;align-items:center;gap:var(--sp-3);position:relative;}
.clearspace-box::before{content:'G';position:absolute;top:var(--sp-2);left:var(--sp-2);font-family:'IBM Plex Mono',monospace;font-size:9px;color:var(--jordy);}
.clearspace-box::after{content:'G';position:absolute;bottom:var(--sp-2);right:var(--sp-2);font-family:'IBM Plex Mono',monospace;font-size:9px;color:var(--jordy);}

/* ══════════════════════════════════════════════════
   ICONS
   ══════════════════════════════════════════════════ */
.icon-grid{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:0;}
.icon-cell{padding:var(--sp-4);border:1px solid var(--fog);margin:-.5px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-1);transition:background var(--dur-fast);cursor:default;aspect-ratio:1;}
.icon-cell:hover{background:var(--ice);}
.icon-cell svg{width:22px;height:22px;stroke:var(--cobalt);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;}
.icon-cell span{font-family:'IBM Plex Mono',monospace;font-size:8px;color:var(--slate);text-transform:uppercase;letter-spacing:.04em;text-align:center;}

/* ══════════════════════════════════════════════════
   VISUAL ELEMENTS
   ══════════════════════════════════════════════════ */
.vis-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--sp-4);}
.vis-card{border:1px solid var(--silver);padding:var(--sp-5);text-align:center;}
.vis-card-label{font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--slate);margin-bottom:var(--sp-3);}
.vis-card-content{height:120px;display:flex;align-items:center;justify-content:center;}

/* ══════════════════════════════════════════════════
   COMPONENTS: BUTTONS
   ══════════════════════════════════════════════════ */
.btn{font-family:'IBM Plex Mono',monospace;font-size:var(--text-xs);letter-spacing:.06em;text-transform:uppercase;padding:var(--sp-3) var(--sp-5);border:1px solid transparent;cursor:pointer;border-radius:var(--radius-sm);transition:all var(--dur-fast) var(--ease-out);display:inline-flex;align-items:center;gap:var(--sp-2);}
.btn-primary{background:var(--cobalt);color:var(--white);border-color:var(--cobalt);}
.btn-primary:hover{background:var(--navy);border-color:var(--navy);}
.btn-secondary{background:transparent;color:var(--cobalt);border-color:var(--cobalt);}
.btn-secondary:hover{background:var(--ice);}
.btn-ghost{background:transparent;color:var(--graphite);border-color:var(--silver);}
.btn-ghost:hover{background:var(--fog);border-color:var(--graphite);}
.btn-danger{background:var(--error);color:var(--white);border-color:var(--error);}
.btn-danger:hover{background:color-mix(in srgb, var(--error) 85%, black);}
.btn-success{background:var(--success);color:var(--white);border-color:var(--success);}
.btn-warning{background:var(--warning);color:var(--white);border-color:var(--warning);}
.btn-sm{padding:var(--sp-1) var(--sp-3);font-size:10px;}
.btn-lg{padding:var(--sp-4) var(--sp-8);font-size:var(--text-sm);}
.btn-icon{padding:var(--sp-2);width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;}
.btn:disabled,.btn[disabled]{opacity:.4;cursor:not-allowed;pointer-events:none;}

.states-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--sp-4);}
.state-cell{text-align:center;padding:var(--sp-4);border:1px solid var(--fog);}
.state-cell-label{font-family:'IBM Plex Mono',monospace;font-size:9px;color:var(--slate);text-transform:uppercase;letter-spacing:.06em;margin-top:var(--sp-2);}

/* ══════════════════════════════════════════════════
   COMPONENTS: INPUTS & FORMS
   ══════════════════════════════════════════════════ */
.input{font-family:'Inter',sans-serif;font-size:var(--text-sm);padding:var(--sp-3) var(--sp-4);border:1px solid var(--silver);border-radius:var(--radius-sm);background:var(--white);color:var(--black);width:100%;outline:none;transition:border-color var(--dur-fast);}
.input:focus{border-color:var(--tufts);box-shadow:0 0 0 3px var(--alice);}
.input::placeholder{color:var(--steel);}
.input-error{border-color:var(--error);}
.input-error:focus{box-shadow:0 0 0 3px var(--error-bg);}
.input-success{border-color:var(--success);}
.textarea{resize:vertical;min-height:80px;}
.select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236B7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:36px;}
.form-group{margin-bottom:var(--sp-5);}
.form-label{display:block;font-family:'IBM Plex Mono',monospace;font-size:var(--text-xs);font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--graphite);margin-bottom:var(--sp-2);}
.form-hint{font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--steel);margin-top:var(--sp-1);}
.form-error-msg{font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--error);margin-top:var(--sp-1);}

.toggle{width:40px;height:22px;background:var(--silver);border-radius:11px;position:relative;cursor:pointer;transition:background var(--dur-base);}
.toggle.active{background:var(--tufts);}
.toggle::after{content:'';position:absolute;width:18px;height:18px;background:white;border-radius:50%;top:2px;left:2px;transition:transform var(--dur-base) var(--ease-out);box-shadow:var(--shadow-sm);}
.toggle.active::after{transform:translateX(18px);}

.check-box{width:18px;height:18px;border:1.5px solid var(--silver);border-radius:var(--radius-sm);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:all var(--dur-fast);}
.check-box.checked{background:var(--cobalt);border-color:var(--cobalt);}
.check-box.checked::after{content:'✓';color:white;font-size:11px;font-weight:700;}
.radio-dot{width:18px;height:18px;border:1.5px solid var(--silver);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:all var(--dur-fast);}
.radio-dot.checked{border-color:var(--cobalt);}
.radio-dot.checked::after{content:'';width:10px;height:10px;background:var(--cobalt);border-radius:50%;}

/* ══════════════════════════════════════════════════
   COMPONENTS: DATA DISPLAY
   ══════════════════════════════════════════════════ */
.badge{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.04em;text-transform:uppercase;padding:2px 8px;border-radius:var(--radius-sm);display:inline-block;}
.badge-blue{background:var(--alice);color:var(--navy);}
.badge-green{background:var(--success-bg);color:var(--success);}
.badge-yellow{background:var(--warning-bg);color:var(--warning);}
.badge-red{background:var(--error-bg);color:var(--error);}
.badge-gray{background:var(--fog);color:var(--graphite);}
.badge-outline{background:transparent;border:1px solid currentColor;}

.tag{font-family:'IBM Plex Mono',monospace;font-size:10px;padding:2px 6px;border-radius:var(--radius-sm);background:var(--fog);color:var(--graphite);display:inline-flex;align-items:center;gap:4px;}
.tag-close{cursor:pointer;opacity:.5;font-size:12px;}
.tag-close:hover{opacity:1;}

.demo-table{width:100%;border-collapse:collapse;font-size:var(--text-sm);}
.demo-table th{font-family:'IBM Plex Mono',monospace;font-size:var(--text-xs);letter-spacing:.06em;text-transform:uppercase;font-weight:600;color:var(--graphite);text-align:left;padding:var(--sp-3) var(--sp-4);border-bottom:2px solid var(--cobalt);background:var(--fog);}
.demo-table td{padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--fog);color:var(--black);}
.demo-table tr:hover td{background:var(--ice);}

.kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-4);}
.kpi{border:1px solid var(--silver);padding:var(--sp-5);}
.kpi-label{font-family:'IBM Plex Mono',monospace;font-size:var(--text-xs);letter-spacing:.06em;text-transform:uppercase;color:var(--slate);margin-bottom:var(--sp-2);}
.kpi-val{font-size:var(--text-3xl);font-weight:800;color:var(--cobalt);line-height:1.1;}
.kpi-delta{font-family:'IBM Plex Mono',monospace;font-size:var(--text-xs);margin-top:var(--sp-2);}
.kpi-up{color:var(--success);}
.kpi-down{color:var(--error);}

.sparkline{display:flex;align-items:flex-end;gap:1px;height:24px;margin-top:var(--sp-2);}
.spark-bar{flex:1;background:var(--tufts);border-radius:1px 1px 0 0;opacity:.5;min-width:3px;}

.progress{height:6px;background:var(--fog);border-radius:3px;overflow:hidden;}
.progress-fill{height:100%;background:var(--tufts);border-radius:3px;transition:width var(--dur-slower) var(--ease-out);}

.avatar{width:32px;height:32px;border-radius:50%;background:var(--cobalt);color:var(--white);display:inline-flex;align-items:center;justify-content:center;font-family:'IBM Plex Mono',monospace;font-size:var(--text-xs);font-weight:700;}
.avatar-sm{width:24px;height:24px;font-size:9px;}
.avatar-lg{width:48px;height:48px;font-size:var(--text-base);}
.avatar-stack{display:flex;}.avatar-stack .avatar{margin-left:-8px;border:2px solid var(--white);}.avatar-stack .avatar:first-child{margin-left:0;}

/* ══════════════════════════════════════════════════
   COMPONENTS: NAVIGATION
   ══════════════════════════════════════════════════ */
.tabs{display:flex;border-bottom:2px solid var(--silver);gap:0;}
.tab{padding:var(--sp-3) var(--sp-5);font-family:'IBM Plex Mono',monospace;font-size:var(--text-xs);letter-spacing:.06em;text-transform:uppercase;color:var(--slate);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-2px;transition:all var(--dur-fast);}
.tab:hover{color:var(--cobalt);}
.tab.active{color:var(--cobalt);border-color:var(--cobalt);font-weight:600;}

.breadcrumbs{display:flex;align-items:center;gap:var(--sp-2);font-family:'IBM Plex Mono',monospace;font-size:var(--text-xs);color:var(--slate);}
.breadcrumbs a{color:var(--tufts);text-decoration:none;}
.breadcrumbs a:hover{text-decoration:underline;}
.breadcrumbs .sep{color:var(--steel);}

.pagination{display:flex;align-items:center;gap:var(--sp-1);}
.page-btn{width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;font-family:'IBM Plex Mono',monospace;font-size:var(--text-xs);color:var(--graphite);border:1px solid var(--silver);border-radius:var(--radius-sm);cursor:pointer;transition:all var(--dur-fast);}
.page-btn:hover,.page-btn.active{background:var(--cobalt);color:var(--white);border-color:var(--cobalt);}

.sidebar-nav{width:220px;border:1px solid var(--silver);font-family:'IBM Plex Mono',monospace;font-size:var(--text-xs);}
.sidebar-nav-item{padding:var(--sp-3) var(--sp-4);color:var(--graphite);cursor:pointer;border-left:3px solid transparent;transition:all var(--dur-fast);}
.sidebar-nav-item:hover{background:var(--ice);color:var(--cobalt);}
.sidebar-nav-item.active{background:var(--ice);color:var(--cobalt);border-left-color:var(--cobalt);font-weight:600;}
.sidebar-nav-group{padding:var(--sp-2) var(--sp-4);color:var(--steel);text-transform:uppercase;letter-spacing:.08em;font-size:9px;font-weight:600;}

/* ══════════════════════════════════════════════════
   COMPONENTS: FEEDBACK
   ══════════════════════════════════════════════════ */
.alert{padding:var(--sp-4) var(--sp-5);border:1px solid;border-radius:var(--radius-sm);font-size:var(--text-sm);display:flex;align-items:flex-start;gap:var(--sp-3);}
.alert-info{background:var(--info-bg);border-color:var(--tufts);color:var(--navy);}
.alert-success{background:var(--success-bg);border-color:var(--success);color:var(--success);}
.alert-warning{background:var(--warning-bg);border-color:var(--warning);color:var(--warning);}
.alert-error{background:var(--error-bg);border-color:var(--error);color:var(--error);}
.alert-icon{font-size:var(--text-lg);line-height:1;}

.toast-demo{display:inline-flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--sp-5);background:var(--charcoal);color:var(--white);border-radius:var(--radius-sm);font-family:'IBM Plex Mono',monospace;font-size:var(--text-xs);letter-spacing:.04em;}
[data-theme="dark"] .toast-demo{background:#2D2D2D;color:#F0F2F5;}

.modal-preview{border:1px solid var(--silver);background:var(--fog);padding:var(--sp-8);display:flex;align-items:center;justify-content:center;min-height:300px;position:relative;}
.modal-box{background:var(--white);border:1px solid var(--silver);padding:0;width:400px;max-width:100%;}
.modal-header{padding:var(--sp-4) var(--sp-5);border-bottom:1px solid var(--silver);display:flex;justify-content:space-between;align-items:center;font-weight:600;font-size:var(--text-base);}
.modal-close{cursor:pointer;color:var(--slate);font-size:var(--text-xl);line-height:1;}
.modal-body{padding:var(--sp-5);font-size:var(--text-sm);color:var(--graphite);line-height:1.7;}
.modal-footer{padding:var(--sp-4) var(--sp-5);border-top:1px solid var(--silver);display:flex;justify-content:flex-end;gap:var(--sp-3);}

/* ══════════════════════════════════════════════════
   LOADING STATES
   ══════════════════════════════════════════════════ */
.skeleton{background:linear-gradient(90deg,var(--fog) 25%,var(--silver) 50%,var(--fog) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:var(--radius-sm);}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.skeleton-line{height:12px;margin-bottom:var(--sp-2);}
.skeleton-line:last-child{width:60%;}
.skeleton-circle{width:40px;height:40px;border-radius:50%;}
.skeleton-block{height:100px;}

.spinner{width:24px;height:24px;border:2px solid var(--silver);border-top-color:var(--tufts);border-radius:50%;animation:spin var(--dur-slower) linear infinite;}
@keyframes spin{to{transform:rotate(360deg)}}

/* ══════════════════════════════════════════════════
   LAYOUT SYSTEM
   ══════════════════════════════════════════════════ */
.grid-demo{background:var(--ice);padding:var(--sp-4);border:1px solid var(--silver);}
.grid-demo-row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--sp-2);margin-bottom:var(--sp-2);}
.grid-col{height:36px;background:var(--tufts);opacity:.3;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font-family:'IBM Plex Mono',monospace;font-size:9px;color:var(--cobalt);font-weight:600;}
.grid-col.on{opacity:.6;}

/* ══════════════════════════════════════════════════
   DASHBOARD PATTERNS
   ══════════════════════════════════════════════════ */
.dash-mock{border:1px solid var(--silver);overflow:hidden;background:var(--fog);}
.dash-topbar{display:flex;align-items:center;justify-content:space-between;padding:var(--sp-3) var(--sp-5);background:var(--cobalt);color:var(--white);font-family:'IBM Plex Mono',monospace;font-size:var(--text-xs);letter-spacing:.06em;text-transform:uppercase;}
.dash-body{display:grid;grid-template-columns:200px 1fr;min-height:360px;}
.dash-sidebar{background:var(--white);border-right:1px solid var(--silver);padding:var(--sp-4) 0;}
.dash-sidebar-item{padding:var(--sp-2) var(--sp-4);font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--slate);cursor:default;}
.dash-sidebar-item.on{background:var(--ice);color:var(--cobalt);border-left:2px solid var(--cobalt);font-weight:600;}
.dash-content{padding:var(--sp-5);}
.dash-kpi-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-3);margin-bottom:var(--sp-4);}
.dash-kpi{background:var(--white);border:1px solid var(--silver);padding:var(--sp-3) var(--sp-4);}
.dash-kpi .kpi-label{font-size:9px;margin-bottom:var(--sp-1);}
.dash-kpi .kpi-val{font-size:var(--text-xl);}
.dash-chart-area{background:var(--white);border:1px solid var(--silver);height:180px;display:flex;align-items:flex-end;padding:var(--sp-4);gap:var(--sp-2);}
.dash-bar{flex:1;background:var(--tufts);border-radius:var(--radius-sm) var(--radius-sm) 0 0;opacity:.6;min-height:8px;}

/* ══════════════════════════════════════════════════
   DATA VIS
   ══════════════════════════════════════════════════ */
.chart-card{border:1px solid var(--silver);padding:var(--sp-6);}
.chart-header{font-family:'IBM Plex Mono',monospace;font-size:var(--text-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--slate);margin-bottom:var(--sp-4);}
.bar-chart{display:flex;align-items:flex-end;gap:var(--sp-3);height:160px;border-bottom:1px solid var(--silver);}
.bar-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:var(--sp-1);height:100%;justify-content:flex-end;}
.bar-fill{width:100%;background:var(--tufts);border-radius:var(--radius-sm) var(--radius-sm) 0 0;min-height:4px;}
.bar-lbl{font-family:'IBM Plex Mono',monospace;font-size:9px;color:var(--slate);margin-top:var(--sp-1);}

.donut{width:140px;height:140px;border-radius:50%;position:relative;}
.donut-hole{position:absolute;width:80px;height:80px;background:var(--white);border-radius:50%;top:30px;left:30px;display:flex;align-items:center;justify-content:center;font-family:'IBM Plex Mono',monospace;font-size:var(--text-xs);font-weight:700;color:var(--cobalt);}
[data-theme="dark"] .donut-hole{background:var(--white);}
.legend{display:flex;flex-direction:column;gap:var(--sp-1);}
.legend-item{display:flex;align-items:center;gap:var(--sp-2);font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--slate);}
.legend-dot{width:8px;height:8px;border-radius:50%;}

.heatmap{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;}
.heat-cell{aspect-ratio:1;border-radius:2px;}

/* ══════════════════════════════════════════════════
   MOTION
   ══════════════════════════════════════════════════ */
.motion-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-4);}
.motion-card{border:1px solid var(--silver);padding:var(--sp-5);text-align:center;}
.motion-demo{height:50px;display:flex;align-items:center;justify-content:center;margin-bottom:var(--sp-3);}
.motion-box{width:28px;height:28px;background:var(--tufts);border-radius:var(--radius-sm);}
.motion-card:hover .m-eo{transform:translateX(36px);transition:transform var(--dur-slow) cubic-bezier(.16,1,.3,1);}
.motion-card:hover .m-eio{transform:translateX(36px);transition:transform var(--dur-slow) cubic-bezier(.65,0,.35,1);}
.motion-card:hover .m-sp{transform:translateX(36px);transition:transform var(--dur-slower) cubic-bezier(.34,1.56,.64,1);}
.motion-card:hover .m-fade{opacity:0;transition:opacity var(--dur-med);}
.m-eo{transition:transform var(--dur-slow) cubic-bezier(.16,1,.3,1);}
.m-eio{transition:transform var(--dur-slow) cubic-bezier(.65,0,.35,1);}
.m-sp{transition:transform var(--dur-slower) cubic-bezier(.34,1.56,.64,1);}
.m-fade{transition:opacity var(--dur-med);}

/* ══════════════════════════════════════════════════
   EDITORIAL & SOCIAL
   ══════════════════════════════════════════════════ */
.editorial-grid{display:grid;grid-template-columns:1.4fr .6fr;gap:var(--sp-6);}
.editorial-hero{border:1px solid var(--silver);padding:var(--sp-10);display:flex;flex-direction:column;justify-content:flex-end;min-height:320px;}
.social-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-4);}
.social-card{border:1px solid var(--silver);aspect-ratio:1;padding:var(--sp-5);display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;}
.social-card-head{display:flex;justify-content:space-between;font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--slate);}
.social-card h3{font-size:var(--text-2xl);font-weight:800;line-height:1.1;color:var(--cobalt);}
.social-card p{font-size:var(--text-sm);color:var(--graphite);line-height:1.4;}
.social-card-foot{display:flex;justify-content:space-between;align-items:flex-end;font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--slate);}
.social-dark{background:var(--cobalt);}
.social-dark .social-card-head,.social-dark .social-card-foot{color:var(--jordy);}
.social-dark h3{color:var(--white);}
.social-dark p{color:var(--jordy);}

/* ══════════════════════════════════════════════════
   EMAIL TEMPLATE
   ══════════════════════════════════════════════════ */
.email-mock{border:1px solid var(--silver);max-width:500px;margin:0 auto;background:var(--fog);}
.email-header{background:var(--cobalt);color:var(--white);padding:var(--sp-5);text-align:center;}
.email-body{background:var(--white);padding:var(--sp-6);margin:var(--sp-4);font-size:var(--text-sm);color:var(--graphite);line-height:1.7;}
.email-footer{padding:var(--sp-4);text-align:center;font-family:'IBM Plex Mono',monospace;font-size:9px;color:var(--steel);}

/* ══════════════════════════════════════════════════
   APPLICATION EXAMPLES
   ══════════════════════════════════════════════════ */
.app-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-5);}
.app-card{border:1px solid var(--silver);overflow:hidden;}
.app-card-head{padding:var(--sp-3) var(--sp-4);background:var(--fog);border-bottom:1px solid var(--silver);font-family:'IBM Plex Mono',monospace;font-size:var(--text-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--graphite);}
.app-card-body{padding:var(--sp-5);}

/* ══════════════════════════════════════════════════
   PHOTOGRAPHY / IMAGERY
   ══════════════════════════════════════════════════ */
.photo-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-4);}
.photo-card{border:1px solid var(--silver);overflow:hidden;}
.photo-placeholder{height:140px;background:linear-gradient(135deg,var(--ice) 0%,var(--alice) 100%);display:flex;align-items:center;justify-content:center;font-family:'IBM Plex Mono',monospace;font-size:9px;color:var(--slate);text-transform:uppercase;letter-spacing:.08em;position:relative;}
.photo-overlay{position:absolute;inset:0;border:1px solid var(--tufts);margin:var(--sp-3);border-radius:var(--radius-sm);}
.photo-label{padding:var(--sp-3) var(--sp-4);font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--graphite);}
.photo-ratio{font-weight:600;color:var(--cobalt);}

/* ══════════════════════════════════════════════════
   PACKAGING / SIGNAGE / VEHICLE
   ══════════════════════════════════════════════════ */
.collateral-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-5);}
.collateral-card{border:1px solid var(--silver);min-height:240px;display:flex;flex-direction:column;}
.collateral-vis{flex:1;display:flex;align-items:center;justify-content:center;padding:var(--sp-6);background:var(--fog);}

/* ══════════════════════════════════════════════════
   DARK MODE PREVIEW
   ══════════════════════════════════════════════════ */
.dark-box{background:#111;border:1px solid #2D2D2D;padding:var(--sp-8);color:#F0F2F5;border-radius:var(--radius-sm);}
.dark-box h3{color:#93BFEF;font-size:var(--text-2xl);font-weight:800;margin-bottom:var(--sp-3);}
.dark-colors{display:flex;gap:var(--sp-3);margin-top:var(--sp-5);}
.dark-chip{flex:1;height:40px;border-radius:var(--radius-sm);border:1px solid #2D2D2D;}

/* ══════════════════════════════════════════════════
   ACCESSIBILITY
   ══════════════════════════════════════════════════ */
.contrast-row{display:flex;align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-2);}
.contrast-sample{flex:1;padding:var(--sp-2) var(--sp-3);font-family:'IBM Plex Mono',monospace;font-size:var(--text-xs);border-radius:var(--radius-sm);display:flex;justify-content:space-between;}
.contrast-pass{font-weight:700;color:var(--success);}

/* ══════════════════════════════════════════════════
   VOICE & TONE
   ══════════════════════════════════════════════════ */
.voice-card{border:1px solid var(--silver);padding:var(--sp-5);}
.voice-card h4{font-family:'IBM Plex Mono',monospace;font-size:var(--text-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--cobalt);margin-bottom:var(--sp-3);}
.voice-ex{padding:var(--sp-4);background:var(--ice);border-left:3px solid var(--tufts);font-size:var(--text-sm);color:var(--graphite);line-height:1.6;margin-bottom:var(--sp-3);}
.voice-note{font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--slate);}

/* ══════════════════════════════════════════════════
   DO / DON'T
   ══════════════════════════════════════════════════ */
.do-col h4,.dont-col h4{font-family:'IBM Plex Mono',monospace;font-size:var(--text-xs);letter-spacing:.1em;text-transform:uppercase;margin-bottom:var(--sp-4);padding-bottom:var(--sp-3);}
.do-col h4{color:var(--success);border-bottom:2px solid var(--success);}
.dont-col h4{color:var(--error);border-bottom:2px solid var(--error);}
.do-item,.dont-item{font-size:var(--text-sm);color:var(--graphite);padding:var(--sp-2) 0;padding-left:var(--sp-5);position:relative;}
.do-item::before{content:'✓';position:absolute;left:0;color:var(--success);font-weight:700;}
.dont-item::before{content:'✕';position:absolute;left:0;color:var(--error);font-weight:700;}

/* ══════════════════════════════════════════════════
   TERMINOLOGY
   ══════════════════════════════════════════════════ */
.term-table{width:100%;border-collapse:collapse;}
.term-table th,.term-table td{padding:var(--sp-3) var(--sp-4);text-align:left;border-bottom:1px solid var(--fog);font-size:var(--text-sm);}
.term-table th{font-family:'IBM Plex Mono',monospace;font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.06em;color:var(--graphite);border-bottom:2px solid var(--silver);background:var(--fog);}

/* ══════════════════════════════════════════════════
   TOKEN REFERENCE
   ══════════════════════════════════════════════════ */
.token-table{width:100%;border-collapse:collapse;font-family:'IBM Plex Mono',monospace;font-size:var(--text-xs);}
.token-table th,.token-table td{padding:var(--sp-2) var(--sp-4);text-align:left;border-bottom:1px solid var(--fog);}
.token-table th{color:var(--graphite);text-transform:uppercase;letter-spacing:.06em;border-bottom:2px solid var(--silver);background:var(--fog);font-weight:600;}
.token-table td{color:var(--black);}
.token-var{color:var(--tufts);}
.token-val{color:var(--graphite);}

/* ══════════════════════════════════════════════════
   BRAND FOOTER
   ══════════════════════════════════════════════════ */
.brand-footer{border:1px solid var(--silver);padding:var(--sp-8);display:grid;grid-template-columns:1.2fr .8fr 1fr;gap:var(--sp-8);}
.page-end{display:flex;align-items:center;justify-content:space-between;padding:var(--sp-4) var(--sp-6);border-top:1px solid var(--silver);font-family:'IBM Plex Mono',monospace;font-size:var(--text-xs);letter-spacing:.06em;text-transform:uppercase;color:var(--slate);margin-top:var(--sp-8);}
.end-dots{display:flex;gap:var(--sp-2);}
.end-dot{width:6px;height:6px;background:var(--cobalt);}
.coords{text-align:center;padding:var(--sp-6) 0;font-family:'IBM Plex Mono',monospace;font-size:var(--text-xs);color:var(--steel);}

/* ══════════════════════════════════════════════════
   WORLD MAP
   ══════════════════════════════════════════════════ */
.world-map-wrap{position:relative;background:var(--ice);border:1px solid var(--silver);padding:var(--sp-6);overflow:hidden;min-height:420px;}
.world-map-wrap svg{width:100%;height:auto;display:block;}
.map-pulse{animation:map-ping 2.5s ease-in-out infinite;}
@keyframes map-ping{0%,100%{r:3;opacity:1}50%{r:7;opacity:.3}}
.map-route{stroke-dasharray:6 4;animation:dash-flow 3s linear infinite;}
@keyframes dash-flow{to{stroke-dashoffset:-30;}}
.map-label{font-family:'IBM Plex Mono',monospace;font-size:8px;fill:var(--graphite);letter-spacing:.04em;}
.map-stat{position:absolute;background:var(--white);border:1px solid var(--silver);padding:var(--sp-3) var(--sp-4);font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--graphite);line-height:1.6;z-index:2;}
.map-stat strong{color:var(--cobalt);display:block;font-size:var(--text-xl);font-weight:800;font-family:'Inter',sans-serif;}

/* ══════════════════════════════════════════════════
   SUPPLY CHAIN FLOW
   ══════════════════════════════════════════════════ */
.flow-pipeline{display:flex;align-items:center;gap:0;overflow-x:auto;padding:var(--sp-6) 0;}
.flow-node{display:flex;flex-direction:column;align-items:center;gap:var(--sp-2);min-width:120px;text-align:center;}
.flow-icon{width:64px;height:64px;border:2px solid var(--cobalt);border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--white);position:relative;z-index:2;}
.flow-icon svg{width:28px;height:28px;stroke:var(--cobalt);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;}
.flow-icon.active{background:var(--cobalt);border-color:var(--cobalt);}
.flow-icon.active svg{stroke:var(--white);}
.flow-label{font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--graphite);text-transform:uppercase;letter-spacing:.06em;font-weight:600;}
.flow-sub{font-family:'IBM Plex Mono',monospace;font-size:9px;color:var(--slate);}
.flow-arrow{width:60px;height:2px;background:var(--silver);position:relative;flex-shrink:0;}
.flow-arrow::after{content:'';position:absolute;right:-1px;top:-4px;border:5px solid transparent;border-left:6px solid var(--silver);}
.flow-arrow.active{background:var(--tufts);}
.flow-arrow.active::after{border-left-color:var(--tufts);}

/* ══════════════════════════════════════════════════
   PRODUCT ICONS
   ══════════════════════════════════════════════════ */
.product-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:0;}
.product-cell{padding:var(--sp-5);border:1px solid var(--fog);margin:-.5px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-2);transition:background var(--dur-fast);aspect-ratio:1;}
.product-cell:hover{background:var(--ice);}
.product-cell svg{width:40px;height:40px;}
.product-cell span{font-family:'IBM Plex Mono',monospace;font-size:9px;color:var(--slate);text-transform:uppercase;letter-spacing:.04em;}

/* ══════════════════════════════════════════════════
   OPERATIONS STRIP
   ══════════════════════════════════════════════════ */
.ops-strip{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border:1px solid var(--silver);background:var(--fog);}
.ops-strip-header{grid-column:1/-1;display:flex;justify-content:space-between;padding:var(--sp-2) var(--sp-5);background:var(--cobalt);color:var(--white);font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.08em;text-transform:uppercase;}
.ops-cell{padding:var(--sp-5);border-right:1px solid var(--silver);background:var(--white);text-align:center;}
.ops-cell:last-child{border-right:none;}
.ops-cell .ops-label{font-family:'IBM Plex Mono',monospace;font-size:9px;color:var(--slate);text-transform:uppercase;letter-spacing:.06em;margin-bottom:var(--sp-2);}
.ops-cell .ops-val{font-size:var(--text-4xl);font-weight:800;color:var(--cobalt);line-height:1;}
.ops-cell .ops-unit{font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--slate);margin-top:var(--sp-1);}

/* ══════════════════════════════════════════════════
   VERTICAL RAILS / PILLARS
   ══════════════════════════════════════════════════ */
.rails-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;min-height:280px;}
.rail{border:1px solid var(--silver);margin:-.5px;display:flex;flex-direction:column;position:relative;overflow:hidden;}
.rail-bar{height:100%;min-height:200px;display:flex;align-items:flex-end;justify-content:center;padding-bottom:var(--sp-4);position:relative;}
.rail-fill{position:absolute;bottom:0;left:0;right:0;transition:height var(--dur-slower) var(--ease-out);}
.rail-num{font-family:'IBM Plex Mono',monospace;font-size:var(--text-3xl);font-weight:800;color:var(--white);position:relative;z-index:2;text-shadow:0 1px 3px rgba(0,0,0,.2);}
.rail-footer{padding:var(--sp-3) var(--sp-4);background:var(--cobalt);color:var(--white);text-align:center;}
.rail-footer .rail-name{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;}
.rail-footer .rail-id{font-family:'IBM Plex Mono',monospace;font-size:9px;opacity:.6;margin-top:2px;}

/* ══════════════════════════════════════════════════
   TEMPERATURE MONITOR
   ══════════════════════════════════════════════════ */
.temp-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-4);}
.temp-card{border:1px solid var(--silver);overflow:hidden;}
.temp-card-vis{height:120px;display:flex;align-items:flex-end;padding:0 var(--sp-4);gap:2px;background:var(--fog);}
.temp-bar{flex:1;border-radius:2px 2px 0 0;min-height:4px;transition:height var(--dur-slow) var(--ease-out);}
.temp-card-info{padding:var(--sp-4);}
.temp-card-temp{font-size:var(--text-2xl);font-weight:800;font-family:'Inter',sans-serif;}
.temp-card-zone{font-family:'IBM Plex Mono',monospace;font-size:9px;text-transform:uppercase;letter-spacing:.06em;margin-top:2px;}

/* ══════════════════════════════════════════════════
   NETWORK TOPOLOGY
   ══════════════════════════════════════════════════ */
.topo-wrap{position:relative;background:var(--ice);border:1px solid var(--silver);padding:var(--sp-6);min-height:340px;overflow:hidden;}
.topo-node{position:absolute;display:flex;flex-direction:column;align-items:center;gap:2px;z-index:2;}
.topo-dot{width:16px;height:16px;border-radius:50%;border:2px solid var(--cobalt);background:var(--white);}
.topo-dot.hub{width:28px;height:28px;background:var(--cobalt);border-color:var(--cobalt);}
.topo-lbl{font-family:'IBM Plex Mono',monospace;font-size:8px;color:var(--graphite);text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;}

/* ══════════════════════════════════════════════════
   REAL-TIME FEED
   ══════════════════════════════════════════════════ */
.feed-list{border:1px solid var(--silver);max-height:320px;overflow:hidden;}
.feed-item{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--fog);font-size:var(--text-sm);transition:background var(--dur-fast);}
.feed-item:hover{background:var(--ice);}
.feed-time{font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--steel);min-width:50px;}
.feed-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.feed-msg{color:var(--graphite);flex:1;}
.feed-id{font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--tufts);}

/* ══════════════════════════════════════════════════
   TRACE / QR
   ══════════════════════════════════════════════════ */
.trace-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-6);}
.trace-card{border:1px solid var(--silver);padding:var(--sp-6);text-align:center;}
.qr-code{width:100px;height:100px;margin:0 auto var(--sp-3);display:grid;grid-template-columns:repeat(10,1fr);grid-template-rows:repeat(10,1fr);gap:1px;}
.qr-cell{border-radius:1px;}
.big-barcode{display:flex;gap:1px;height:60px;justify-content:center;margin:0 auto var(--sp-3);}
.big-barcode div{background:var(--cobalt);}

/* ══════════════════════════════════════════════════
   GRADIENT SYSTEM
   ══════════════════════════════════════════════════ */
.grad-row{display:flex;gap:var(--sp-4);}
.grad-swatch{flex:1;height:80px;border-radius:var(--radius-sm);border:1px solid rgba(0,0,0,.04);}

/* ══════════════════════════════════════════════════
   MICRO-INTERACTIONS — Premium Feel
   ══════════════════════════════════════════════════ */

/* Button press — physical feel */
.btn:active { transform: scale(0.97); transition: transform 80ms ease-out; }
.btn { transition: all var(--dur-fast) var(--ease-out); }

/* Row hover — slide-in border */
.demo-table tbody tr { border-left: 3px solid transparent; transition: border-color var(--dur-base) var(--ease-out), background var(--dur-fast); }
.demo-table tbody tr:hover { border-left-color: var(--cobalt); }

/* Card lift — smooth hover */
.app-card { transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.app-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }

/* KPI value — entrance animation */
@keyframes countFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.kpi-val { animation: countFadeIn 0.6s var(--ease-out) both; }

/* Badge pulse on state change */
@keyframes badgePulse { 0% { box-shadow: 0 0 0 0 currentColor; } 70% { box-shadow: 0 0 0 6px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.badge-pulse { animation: badgePulse 0.8s ease-out; }

/* Sidebar nav — smooth active slide */
.sidebar-nav-item { transition: background var(--dur-fast), color var(--dur-fast), border-left-color var(--dur-base) var(--ease-out); }
.dash-sidebar-item { transition: background var(--dur-fast), color var(--dur-fast); }

/* Toggle — spring flip */
.toggle { transition: background var(--dur-base) var(--spring); }
.toggle::after { transition: transform var(--dur-base) var(--spring); }

/* Checkbox — pop check */
.check-box { transition: background var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast); }
.check-box:active { transform: scale(0.9); }

/* Tab — smooth underline */
.tab { transition: color var(--dur-fast), border-color var(--dur-base) var(--ease-out); }

/* Alert — slide in */
@keyframes alertSlideIn { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: translateX(0); } }
.alert { animation: alertSlideIn 0.3s var(--ease-out) both; }

/* Progress bar — smooth fill */
.progress-fill { transition: width 0.8s var(--ease-out); }

/* Avatar — subtle hover */
.avatar { transition: transform var(--dur-fast); }
.avatar:hover { transform: scale(1.08); }

/* Input focus — glow expand */
.input { transition: border-color var(--dur-fast), box-shadow var(--dur-base) var(--ease-out); }

/* Link hover — underline slide */
a { transition: color var(--dur-fast); }

/* ══════════════════════════════════════════════════
   GLASSMORPHISM & VISUAL DEPTH
   ══════════════════════════════════════════════════ */

/* Frosted glass modal overlay */
.modal-preview { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }

/* Gradient buttons — not flat */
.btn-primary { background: linear-gradient(135deg, var(--cobalt) 0%, var(--navy) 100%); border-color: var(--cobalt); }
.btn-primary:hover { background: linear-gradient(135deg, var(--navy) 0%, var(--cobalt) 100%); }

/* Colored shadows — elements glow their own color */
.badge-green { box-shadow: 0 2px 8px rgba(15, 118, 110, 0.15); }
.badge-red { box-shadow: 0 2px 8px rgba(220, 38, 38, 0.15); }
.badge-yellow { box-shadow: 0 2px 8px rgba(180, 83, 9, 0.15); }
.badge-blue { box-shadow: 0 2px 8px rgba(26, 87, 153, 0.15); }

/* Page background — uses token system */
body { background: var(--background); }
[data-theme="dark"] body { background: var(--white); }

/* Card surface — subtle gradient */
.app-card { background: linear-gradient(180deg, var(--white) 0%, #F8FAFC 100%); }
[data-theme="dark"] .app-card { background: var(--white); }

/* KPI card — left accent border on hover */
.kpi { transition: border-color var(--dur-base), box-shadow var(--dur-base); }
.kpi:hover { border-left: 3px solid var(--cobalt); box-shadow: var(--shadow-sm); }

/* Table header — gradient bottom instead of hard line */
.demo-table thead th { border-bottom: none; background: linear-gradient(180deg, var(--fog) 0%, var(--fog) 85%, var(--cobalt) 100%); background-size: 100% calc(100% + 2px); }

/* Toast — spring physics */
@keyframes toastSlideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes toastSlideOut { from { transform: translateX(0); opacity: 1; } to { transform: translateX(100%); opacity: 0; } }

/* Section reveal on scroll — subtle fade up */
@keyframes sectionReveal { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
.s { animation: sectionReveal 0.5s var(--ease-out) both; }

/* Topbar — subtle bottom shadow instead of hard border */
.topbar { box-shadow: 0 1px 3px rgba(9, 47, 100, 0.08); }

/* ══════════════════════════════════════════════════
   TYPOGRAPHY POLISH
   ══════════════════════════════════════════════════ */

/* Tabular numbers for data columns */
.kpi-val, .demo-table td:nth-child(n), .token-val { font-variant-numeric: tabular-nums; }

/* Tighter tracking on large text */
.hero-title { letter-spacing: -0.025em; }

/* Selection color — brand blue */
::selection { background: var(--alice); color: var(--cobalt); }

/* ══════════════════════════════════════════════════
   SHADCN/UI VISUAL TREATMENT
   Modern aesthetic: ring focus, smooth transitions,
   subtle borders, muted surfaces, glass effects
   ══════════════════════════════════════════════════ */

/* ── 1. RING FOCUS — Double box-shadow ring with offset ── */
.input:focus {
  border-color: var(--ring);
  box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--ring);
  outline: none;
}
.input-error:focus {
  border-color: var(--destructive);
  box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--destructive);
}
.select:focus {
  border-color: var(--ring);
  box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--ring);
  outline: none;
}
textarea.input:focus {
  border-color: var(--ring);
  box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--ring);
  outline: none;
}
.btn:focus-visible {
  box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--ring);
  outline: none;
}
.topbar-btn:focus-visible {
  box-shadow: 0 0 0 2px rgba(9, 47, 100, 0.4), 0 0 0 4px var(--ring);
  outline: none;
}
.toggle:focus-visible {
  box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--ring);
  outline: none;
}
.check-box:focus-visible {
  box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--ring);
  outline: none;
}
.radio-dot:focus-visible {
  box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--ring);
  outline: none;
}
.page-btn:focus-visible {
  box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--ring);
  outline: none;
}

/* ── 2. CARD BORDERS — Subtle at rest, visible on hover with ring ── */
.app-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.app-card:hover {
  border-color: var(--ring);
  box-shadow: 0 0 0 1px var(--ring), var(--shadow-md);
}
.kpi {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.kpi:hover {
  border-color: var(--ring);
  box-shadow: 0 0 0 1px var(--ring), var(--shadow-sm);
}
.chart-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.voice-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.trace-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

/* ── 3. SMOOTH TRANSITIONS on interactive elements ── */
.btn,
.input,
.select,
.toggle,
.check-box,
.radio-dot,
.tab,
.page-btn,
.sidebar-nav-item,
.badge,
.tag,
.alert,
.app-card,
.kpi,
.avatar,
.feed-item,
.toc a,
.breadcrumbs a {
  transition-property: color, background-color, border-color, box-shadow, opacity, transform;
  transition-duration: var(--dur-fast);
  transition-timing-function: var(--ease-out);
}
.app-card,
.kpi,
.modal-box {
  transition-duration: var(--dur-base);
}

/* ── 4. MUTED BACKGROUNDS — Semantic surfaces ── */
.demo-table thead th {
  background: var(--muted);
  color: var(--muted-foreground);
}
.scale-table th {
  background: var(--muted);
  color: var(--muted-foreground);
}
.term-table th {
  background: var(--muted);
  color: var(--muted-foreground);
}
.token-table th {
  background: var(--muted);
  color: var(--muted-foreground);
}
.app-card-head {
  background: var(--muted);
  color: var(--muted-foreground);
}
.collateral-vis {
  background: var(--muted);
}

/* ── 5. SEPARATOR — Thin muted line utility ── */
.separator {
  height: 1px;
  background: var(--border);
  margin: var(--sp-4) 0;
  border: none;
}
.separator-vertical {
  width: 1px;
  background: var(--border);
  margin: 0 var(--sp-3);
  align-self: stretch;
}
.separator-lg {
  height: 1px;
  background: var(--border);
  margin: var(--sp-8) 0;
  border: none;
}

/* ── 6. SELECT/DROPDOWN — Clean border, ring on focus ── */
.select {
  border: 1px solid var(--input);
  border-radius: var(--radius-sm);
  background-color: var(--background);
  color: var(--foreground);
}
.select:hover {
  border-color: var(--ring);
}

/* ── 7. TOGGLE (SWITCH) — Smoother, rounder, iOS-like ── */
.toggle {
  width: 44px;
  height: 24px;
  border-radius: 12px;
  background: var(--input);
  border: 2px solid transparent;
  cursor: pointer;
}
.toggle.active {
  background: var(--primary);
}
.toggle::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--background);
  box-shadow: var(--shadow-sm);
  top: 2px;
  left: 2px;
}
.toggle.active::after {
  transform: translateX(20px);
}

/* ── 8. BADGE DOT — Small colored dot before badge text ── */
.badge {
  display: inline-flex;
  align-items: center;
}
.badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  margin-right: 4px;
  display: inline-block;
  flex-shrink: 0;
}
.badge-outline::before {
  background: currentColor;
}

/* ── 9. ACCORDION (collapsible sections) — Smooth height ── */
.s .s-body {
  max-height: 50000px;
  overflow: hidden;
  transition: max-height var(--dur-slow) var(--ease-out), opacity var(--dur-base), padding var(--dur-base);
  opacity: 1;
}
.s.collapsed .s-body {
  max-height: 0;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
  margin: 0;
  display: block;
}
.s .s-note {
  max-height: 500px;
  overflow: hidden;
  transition: max-height var(--dur-slow) var(--ease-out), opacity var(--dur-base), padding var(--dur-base);
  opacity: 1;
}
.s.collapsed .s-note {
  max-height: 0;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
  overflow: hidden;
  display: block;
}

/* ── 10. POPOVER SHADOW — Deeper shadow for elevated elements ── */
.modal-box,
[role="listbox"],
.cmd-palette {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
              0 2px 4px -2px rgba(0, 0, 0, 0.1),
              0 0 0 1px var(--border);
  border-radius: var(--radius-lg);
}
.modal-box {
  border: 1px solid var(--border);
}

/* ── 11. TABLE ROW — Subtle hover with semantic tokens ── */
.demo-table tbody tr:hover td {
  background: var(--accent);
}
.demo-table tbody tr {
  border-left: 3px solid transparent;
}
.demo-table tbody tr:hover {
  border-left-color: var(--primary);
}

/* ── 12. SKELETON — Rounded corners matching components ── */
.skeleton {
  border-radius: var(--radius-md);
}
.skeleton-circle {
  border-radius: 50%;
}
.skeleton-block {
  border-radius: var(--radius-lg);
}

/* ── 13. AVATAR ONLINE INDICATOR — White ring separator ── */
.avatar {
  position: relative;
}
.avatar-online::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 10px;
  height: 10px;
  background: var(--success);
  border-radius: 50%;
  border: 2px solid var(--background);
}
.avatar-sm.avatar-online::after {
  width: 8px;
  height: 8px;
  border-width: 1.5px;
}

/* ── 14. TAB — Smooth underline transition ── */
.tab {
  position: relative;
}
.tab::before {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--primary);
  transform: scaleX(0);
  transition: transform var(--dur-base) var(--ease-out);
  transform-origin: center;
}
.tab.active::before {
  transform: scaleX(1);
}
.tab.active {
  border-color: transparent;
}

/* ── 15. SIDEBAR NAV — Smooth transitions with semantic tokens ── */
.sidebar-nav-item {
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-left-color var(--dur-base) var(--ease-out);
}
.sidebar-nav-item:hover {
  background: var(--accent);
  color: var(--accent-foreground);
}
.sidebar-nav-item.active {
  background: var(--accent);
  color: var(--accent-foreground);
  border-left-color: var(--primary);
}

/* ── 16. SECTION HEAD — Hover uses semantic accent ── */
.s-head:hover {
  background: var(--accent);
}

/* ── 17. TOAST — Bottom-center stack (shadcn/sonner style) ── */
.toast,
.copy-toast {
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
              0 2px 4px -2px rgba(0, 0, 0, 0.1),
              0 0 0 1px var(--border);
}
.toast.show,
.copy-toast.show {
  transform: translateX(-50%) translateY(0);
}

/* ── 18. PROGRESS BAR — Use primary token ── */
.progress {
  background: var(--muted);
  border-radius: var(--radius-lg);
}
.progress-fill {
  background: var(--primary);
  border-radius: var(--radius-lg);
}

/* ── 19. ALERT — Use semantic ring on focus within ── */
.alert {
  border-radius: var(--radius-md);
}
.alert-info {
  background: var(--accent);
  border-color: var(--ring);
  color: var(--accent-foreground);
}

/* ── 20. FEED ITEM — Hover with accent background ── */
.feed-item:hover {
  background: var(--accent);
}

/* ── 21. CHECKBOX/RADIO — Use primary token ── */
.check-box.checked {
  background: var(--primary);
  border-color: var(--primary);
}
.radio-dot.checked {
  border-color: var(--primary);
}
.radio-dot.checked::after {
  background: var(--primary);
}

/* ── 22. PAGE BUTTON (pagination) — Use semantic tokens ── */
.page-btn:hover,
.page-btn.active {
  background: var(--primary);
  color: var(--primary-foreground);
  border-color: var(--primary);
}

/* ── 23. BREADCRUMBS — Use ring token for links ── */
.breadcrumbs a {
  color: var(--ring);
}
.breadcrumbs a:hover {
  color: var(--primary);
}

/* ── 24. SPINNER — Use ring token ── */
.spinner {
  border-color: var(--muted);
  border-top-color: var(--ring);
}

/* ── 25. SECTION BORDERS — Use border token ── */
.s {
  border-color: var(--border);
  border-radius: var(--radius-md);
}
.s-head {
  border-bottom-color: var(--border);
}

/* ══════════════════════════════════════════════════
   SHADCN/UI ADVANCED COMPONENTS
   Premium SaaS patterns: sheet, combobox, hover card,
   resizable panels, date picker, scroll area, etc.
   ══════════════════════════════════════════════════ */

/* ── 1. Sheet / Drawer (slide-in panel) ── */
.sheet-overlay { position:fixed; inset:0; background:rgba(0,0,0,.4); backdrop-filter:blur(4px); z-index:200; opacity:0; pointer-events:none; transition:opacity var(--dur-base); }
.sheet-overlay.open { opacity:1; pointer-events:auto; }
.sheet { position:fixed; top:0; right:0; bottom:0; width:420px; max-width:90vw; background:var(--background); border-left:1px solid var(--border); box-shadow:var(--shadow-xl); transform:translateX(100%); transition:transform var(--dur-med) var(--ease-out); z-index:201; overflow-y:auto; }
.sheet-overlay.open .sheet { transform:translateX(0); }
.sheet-header { padding:var(--sp-5) var(--sp-6); border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; }
.sheet-title { font-size:var(--text-lg); font-weight:700; color:var(--foreground); }
.sheet-close { width:32px; height:32px; border:none; background:transparent; cursor:pointer; color:var(--muted-foreground); border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center; }
.sheet-close:hover { background:var(--muted); color:var(--foreground); }
.sheet-body { padding:var(--sp-6); }
.sheet-footer { padding:var(--sp-4) var(--sp-6); border-top:1px solid var(--border); display:flex; justify-content:flex-end; gap:var(--sp-3); }
/* Left sheet variant */
.sheet-left .sheet { right:auto; left:0; border-left:none; border-right:1px solid var(--border); transform:translateX(-100%); }
.sheet-left.open .sheet { transform:translateX(0); }
/* Bottom sheet (mobile) */
.sheet-bottom .sheet { top:auto; right:0; left:0; bottom:0; width:100%; max-height:85vh; border-left:none; border-top:1px solid var(--border); border-radius:var(--radius-lg) var(--radius-lg) 0 0; transform:translateY(100%); }
.sheet-bottom.open .sheet { transform:translateY(0); }
.sheet-handle { width:36px; height:4px; background:var(--muted); border-radius:2px; margin:var(--sp-2) auto var(--sp-3); }

/* ── 2. Hover Card ── */
.hover-card-trigger { position:relative; cursor:pointer; }
.hover-card { position:absolute; top:100%; left:0; margin-top:var(--sp-2); width:320px; background:var(--card); border:1px solid var(--border); border-radius:var(--radius-md); box-shadow:var(--shadow-lg); padding:var(--sp-5); z-index:100; opacity:0; pointer-events:none; transform:translateY(4px); transition:opacity var(--dur-fast), transform var(--dur-fast); }
.hover-card-trigger:hover .hover-card, .hover-card-trigger:focus-within .hover-card { opacity:1; pointer-events:auto; transform:translateY(0); }
.hover-card-header { display:flex; align-items:center; gap:var(--sp-3); margin-bottom:var(--sp-3); }
.hover-card-title { font-weight:600; color:var(--foreground); }
.hover-card-desc { font-size:var(--text-sm); color:var(--muted-foreground); line-height:1.5; }
.hover-card-footer { margin-top:var(--sp-3); padding-top:var(--sp-3); border-top:1px solid var(--border); display:flex; gap:var(--sp-4); font-family:'IBM Plex Mono',monospace; font-size:var(--text-2xs); color:var(--muted-foreground); }

/* ── 3. Combobox (search + select + create + multi) ── */
.combobox { position:relative; }
.combobox-trigger { display:flex; align-items:center; justify-content:space-between; width:100%; padding:var(--sp-2) var(--sp-3); border:1px solid var(--input); border-radius:var(--radius-sm); background:var(--background); cursor:pointer; min-height:38px; gap:var(--sp-2); flex-wrap:wrap; }
.combobox-trigger:focus-within { border-color:var(--ring); box-shadow:0 0 0 2px var(--background), 0 0 0 4px var(--ring); }
.combobox-input { border:none; outline:none; background:transparent; flex:1; min-width:80px; font-family:inherit; font-size:var(--text-sm); color:var(--foreground); }
.combobox-input::placeholder { color:var(--muted-foreground); }
.combobox-tag { display:inline-flex; align-items:center; gap:4px; background:var(--accent); color:var(--accent-foreground); font-size:var(--text-2xs); font-family:'IBM Plex Mono',monospace; padding:2px 6px; border-radius:var(--radius-sm); }
.combobox-tag-close { cursor:pointer; opacity:.6; font-size:12px; }
.combobox-tag-close:hover { opacity:1; }
.combobox-chevron { color:var(--muted-foreground); font-size:12px; flex-shrink:0; transition:transform var(--dur-fast); }
.combobox.open .combobox-chevron { transform:rotate(180deg); }
.combobox-list { position:absolute; top:100%; left:0; right:0; margin-top:var(--sp-1); background:var(--card); border:1px solid var(--border); border-radius:var(--radius-md); box-shadow:var(--shadow-lg); max-height:240px; overflow-y:auto; z-index:100; display:none; }
.combobox.open .combobox-list { display:block; }
.combobox-empty { padding:var(--sp-4); text-align:center; font-size:var(--text-sm); color:var(--muted-foreground); }
.combobox-item { padding:var(--sp-2) var(--sp-3); cursor:pointer; font-size:var(--text-sm); color:var(--foreground); display:flex; align-items:center; gap:var(--sp-2); }
.combobox-item:hover, .combobox-item.active { background:var(--accent); color:var(--accent-foreground); }
.combobox-item-check { width:16px; color:var(--primary); opacity:0; }
.combobox-item.selected .combobox-item-check { opacity:1; }
.combobox-create { padding:var(--sp-2) var(--sp-3); cursor:pointer; font-size:var(--text-sm); color:var(--primary); border-top:1px solid var(--border); }
.combobox-create:hover { background:var(--accent); }

/* ── 4. Date Picker ── */
.date-picker { position:relative; }
.date-picker-trigger { display:flex; align-items:center; gap:var(--sp-2); padding:var(--sp-2) var(--sp-3); border:1px solid var(--input); border-radius:var(--radius-sm); background:var(--background); cursor:pointer; font-size:var(--text-sm); color:var(--foreground); min-width:200px; }
.date-picker-trigger:focus { border-color:var(--ring); box-shadow:0 0 0 2px var(--background), 0 0 0 4px var(--ring); }
.date-picker-icon { color:var(--muted-foreground); }
.date-picker-calendar { position:absolute; top:100%; left:0; margin-top:var(--sp-1); background:var(--card); border:1px solid var(--border); border-radius:var(--radius-md); box-shadow:var(--shadow-lg); padding:var(--sp-3); z-index:100; display:none; min-width:280px; }
.date-picker.open .date-picker-calendar { display:block; }
.cal-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--sp-2); }
.cal-nav { width:28px; height:28px; border:none; background:transparent; cursor:pointer; border-radius:var(--radius-sm); color:var(--muted-foreground); display:flex; align-items:center; justify-content:center; }
.cal-nav:hover { background:var(--accent); color:var(--foreground); }
.cal-month { font-size:var(--text-sm); font-weight:600; color:var(--foreground); }
.cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:1px; }
.cal-day-header { font-family:'IBM Plex Mono',monospace; font-size:var(--text-3xs); color:var(--muted-foreground); text-align:center; padding:var(--sp-1); text-transform:uppercase; }
.cal-day { width:36px; height:36px; display:flex; align-items:center; justify-content:center; font-size:var(--text-sm); border-radius:var(--radius-sm); cursor:pointer; color:var(--foreground); }
.cal-day:hover { background:var(--accent); }
.cal-day.today { font-weight:700; color:var(--primary); }
.cal-day.selected { background:var(--primary); color:var(--primary-foreground); }
.cal-day.range { background:var(--accent); }
.cal-day.outside { color:var(--muted-foreground); opacity:.5; }
.cal-day.disabled { opacity:.3; cursor:not-allowed; }
.cal-presets { border-top:1px solid var(--border); margin-top:var(--sp-2); padding-top:var(--sp-2); display:flex; flex-direction:column; gap:1px; }
.cal-preset { padding:var(--sp-1) var(--sp-2); font-size:var(--text-sm); color:var(--foreground); cursor:pointer; border-radius:var(--radius-sm); }
.cal-preset:hover { background:var(--accent); }

/* ── 5. Number Input (stepper) ── */
.number-input { display:inline-flex; align-items:center; border:1px solid var(--input); border-radius:var(--radius-sm); overflow:hidden; }
.number-input:focus-within { border-color:var(--ring); box-shadow:0 0 0 2px var(--background), 0 0 0 4px var(--ring); }
.number-input-btn { width:36px; height:36px; border:none; background:var(--muted); color:var(--foreground); cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:var(--text-lg); }
.number-input-btn:hover { background:var(--accent); }
.number-input-btn:active { background:var(--primary); color:var(--primary-foreground); }
.number-input input { width:60px; text-align:center; border:none; outline:none; font-size:var(--text-sm); font-variant-numeric:tabular-nums; background:var(--background); color:var(--foreground); padding:var(--sp-2); -moz-appearance:textfield; }
.number-input input::-webkit-inner-spin-button { display:none; }

/* ── 6. Resizable Panels ── */
.resizable { display:flex; height:100%; }
.resizable-panel { overflow:auto; }
.resizable-handle { width:4px; cursor:col-resize; background:transparent; position:relative; flex-shrink:0; }
.resizable-handle::after { content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:4px; height:24px; background:var(--border); border-radius:2px; transition:background var(--dur-fast); }
.resizable-handle:hover::after, .resizable-handle:active::after { background:var(--ring); width:4px; height:40px; }
.resizable-handle:active { background:var(--accent); }
/* Horizontal variant */
.resizable-vertical { flex-direction:column; }
.resizable-vertical .resizable-handle { width:100%; height:4px; cursor:row-resize; }
.resizable-vertical .resizable-handle::after { width:24px; height:4px; }

/* ── 7. Scroll Area (custom scrollbar) ── */
.scroll-area { overflow:auto; scrollbar-width:thin; scrollbar-color:var(--muted) transparent; }
.scroll-area::-webkit-scrollbar { width:6px; height:6px; }
.scroll-area::-webkit-scrollbar-track { background:transparent; }
.scroll-area::-webkit-scrollbar-thumb { background:var(--muted); border-radius:3px; }
.scroll-area::-webkit-scrollbar-thumb:hover { background:var(--muted-foreground); }
.scroll-area::-webkit-scrollbar-corner { background:transparent; }

/* ── 8. Aspect Ratio ── */
.aspect-square { aspect-ratio:1; }
.aspect-video { aspect-ratio:16/9; }
.aspect-photo { aspect-ratio:4/3; }
.aspect-wide { aspect-ratio:3/2; }
.aspect-portrait { aspect-ratio:3/4; }

/* ── 9. Breadcrumb with Collapse ── */
.breadcrumb-collapsed { position:relative; }
.breadcrumb-ellipsis { cursor:pointer; padding:var(--sp-1) var(--sp-2); border-radius:var(--radius-sm); color:var(--muted-foreground); }
.breadcrumb-ellipsis:hover { background:var(--muted); color:var(--foreground); }
.breadcrumb-dropdown { position:absolute; top:100%; left:0; background:var(--card); border:1px solid var(--border); border-radius:var(--radius-md); box-shadow:var(--shadow-lg); padding:var(--sp-1); min-width:160px; z-index:50; display:none; }
.breadcrumb-collapsed.open .breadcrumb-dropdown { display:block; }
.breadcrumb-dropdown-item { padding:var(--sp-1) var(--sp-3); font-size:var(--text-sm); color:var(--foreground); cursor:pointer; border-radius:var(--radius-sm); }
.breadcrumb-dropdown-item:hover { background:var(--accent); }

/* ── 10. Context Menu (right-click) ── */
.context-menu { position:fixed; background:var(--card); border:1px solid var(--border); border-radius:var(--radius-md); box-shadow:var(--shadow-lg); padding:var(--sp-1); min-width:180px; z-index:300; display:none; }
.context-menu.open { display:block; }
.context-menu-item { padding:var(--sp-2) var(--sp-3); font-size:var(--text-sm); color:var(--foreground); cursor:pointer; border-radius:var(--radius-sm); display:flex; align-items:center; gap:var(--sp-2); }
.context-menu-item:hover { background:var(--accent); color:var(--accent-foreground); }
.context-menu-item-icon { width:16px; color:var(--muted-foreground); }
.context-menu-item-shortcut { margin-left:auto; font-family:'IBM Plex Mono',monospace; font-size:var(--text-3xs); color:var(--muted-foreground); }
.context-menu-separator { height:1px; background:var(--border); margin:var(--sp-1) 0; }
.context-menu-item.destructive { color:var(--destructive); }
.context-menu-item.destructive:hover { background:var(--destructive); color:var(--destructive-foreground); }

/* ── 11. Sonner-style Toast (bottom-center stack) ── */
.toast-stack { position:fixed; bottom:var(--sp-6); left:50%; transform:translateX(-50%); z-index:400; display:flex; flex-direction:column-reverse; gap:var(--sp-2); pointer-events:none; max-width:420px; width:90vw; }
.toast-sonner { pointer-events:auto; background:var(--card); border:1px solid var(--border); border-radius:var(--radius-md); box-shadow:var(--shadow-lg); padding:var(--sp-3) var(--sp-4); display:flex; align-items:flex-start; gap:var(--sp-3); transform:translateY(100%) scale(.95); opacity:0; transition:transform var(--dur-med) var(--spring), opacity var(--dur-base); }
.toast-sonner.show { transform:translateY(0) scale(1); opacity:1; }
.toast-sonner-icon { width:20px; height:20px; flex-shrink:0; margin-top:2px; }
.toast-sonner-content { flex:1; }
.toast-sonner-title { font-size:var(--text-sm); font-weight:600; color:var(--foreground); }
.toast-sonner-desc { font-size:var(--text-sm); color:var(--muted-foreground); margin-top:2px; }
.toast-sonner-action { font-size:var(--text-sm); font-weight:600; color:var(--primary); cursor:pointer; background:none; border:none; padding:0; }
.toast-sonner-action:hover { text-decoration:underline; }
.toast-sonner-close { color:var(--muted-foreground); cursor:pointer; background:none; border:none; padding:var(--sp-1); border-radius:var(--radius-sm); }
.toast-sonner-close:hover { background:var(--muted); color:var(--foreground); }
.toast-sonner.success .toast-sonner-icon { color:var(--success); }
.toast-sonner.error .toast-sonner-icon { color:var(--error); }
.toast-sonner.warning .toast-sonner-icon { color:var(--warning); }

/* ── 12. Data Table Toolbar ── */
.table-toolbar { display:flex; align-items:center; justify-content:space-between; padding:var(--sp-3) 0; gap:var(--sp-3); flex-wrap:wrap; }
.table-toolbar-left { display:flex; align-items:center; gap:var(--sp-2); }
.table-toolbar-right { display:flex; align-items:center; gap:var(--sp-2); }
.table-filter-btn { display:inline-flex; align-items:center; gap:var(--sp-1); padding:var(--sp-1) var(--sp-3); border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--background); font-size:var(--text-sm); color:var(--foreground); cursor:pointer; }
.table-filter-btn:hover { background:var(--accent); }
.table-filter-btn.active { background:var(--primary); color:var(--primary-foreground); border-color:var(--primary); }
.table-view-toggle { display:inline-flex; border:1px solid var(--border); border-radius:var(--radius-sm); overflow:hidden; }
.table-view-btn { padding:var(--sp-1) var(--sp-2); border:none; background:var(--background); cursor:pointer; color:var(--muted-foreground); }
.table-view-btn:hover { background:var(--muted); }
.table-view-btn.active { background:var(--accent); color:var(--accent-foreground); }
.table-density { display:inline-flex; border:1px solid var(--border); border-radius:var(--radius-sm); overflow:hidden; }
.table-density-btn { padding:var(--sp-1) var(--sp-2); border:none; background:var(--background); cursor:pointer; font-size:var(--text-2xs); font-family:'IBM Plex Mono',monospace; color:var(--muted-foreground); }
.table-density-btn:hover { background:var(--muted); }
.table-density-btn.active { background:var(--accent); color:var(--accent-foreground); }
.table-column-toggle { position:relative; }
.table-column-list { position:absolute; top:100%; right:0; background:var(--card); border:1px solid var(--border); border-radius:var(--radius-md); box-shadow:var(--shadow-lg); padding:var(--sp-2); min-width:180px; z-index:50; display:none; }
.table-column-toggle.open .table-column-list { display:block; }
.table-column-item { display:flex; align-items:center; gap:var(--sp-2); padding:var(--sp-1) var(--sp-2); font-size:var(--text-sm); cursor:pointer; border-radius:var(--radius-sm); }
.table-column-item:hover { background:var(--accent); }

/* ── 13. Command Menu Group Styling ── */
.cmd-group { padding:var(--sp-1) 0; }
.cmd-group-title { padding:var(--sp-1) var(--sp-3); font-family:'IBM Plex Mono',monospace; font-size:var(--text-3xs); color:var(--muted-foreground); text-transform:uppercase; letter-spacing:.08em; }
.cmd-separator { height:1px; background:var(--border); margin:var(--sp-1) 0; }
.cmd-item-badge { font-family:'IBM Plex Mono',monospace; font-size:var(--text-3xs); background:var(--muted); padding:1px 4px; border-radius:var(--radius-sm); color:var(--muted-foreground); margin-left:auto; }

/* ── 14. Status Dot Indicator ── */
.status-dot { width:8px; height:8px; border-radius:50%; display:inline-block; }
.status-dot-success { background:var(--success); }
.status-dot-warning { background:var(--warning); }
.status-dot-error { background:var(--error); }
.status-dot-info { background:var(--info); }
.status-dot-muted { background:var(--muted-foreground); }
.status-dot-pulse { animation:statusPulse 2s ease-in-out infinite; }
@keyframes statusPulse { 0%,100%{opacity:1} 50%{opacity:.4} }

/* ── 15. Input with Icon ── */
.input-icon-wrap { position:relative; }
.input-icon-wrap .input { padding-left:36px; }
.input-icon-wrap .input-icon { position:absolute; left:var(--sp-3); top:50%; transform:translateY(-50%); color:var(--muted-foreground); pointer-events:none; width:16px; height:16px; }
.input-icon-wrap-right .input { padding-right:36px; padding-left:var(--sp-3); }
.input-icon-wrap-right .input-icon { left:auto; right:var(--sp-3); }

/* ══════════════════════════════════════════════════
   COMPREHENSIVE MOBILE & TABLET RESPONSIVE
   ══════════════════════════════════════════════════ */

/* Tablet (768-1023px) */
@media (max-width:1023px) {
  .topbar { font-size:10px; padding:var(--sp-2) var(--sp-4); }
  .topbar-r input { width:120px; }
  .s-body { padding:var(--sp-6); }
  .hero-section { min-height:400px; }
  .hero-title { font-size:var(--text-5xl); }
  .hero-pillars { flex-wrap:wrap; gap:var(--sp-3); }
  .vibe-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .vibe-word:nth-child(4),.vibe-word:nth-child(5) { border-top:1px solid var(--silver); }
  .kpi-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .logo-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .icon-grid { grid-template-columns:repeat(6,minmax(0,1fr)); }
  .product-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .ops-strip { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .temp-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .trace-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .social-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .app-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .a11y-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .motion-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .photo-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .vis-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .elev-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .editorial-grid { grid-template-columns:1fr; }
  .chart-demo { grid-template-columns:1fr; }
  .brand-footer { grid-template-columns:1fr; }
  .demo-table { font-size:var(--text-xs); }
  .demo-table th,.demo-table td { padding:var(--sp-2) var(--sp-3); }
}

/* Mobile (max 767px) */
@media (max-width:767px) {
  .page { padding:var(--sp-3); }
  .topbar { flex-wrap:wrap; gap:var(--sp-2); }
  .topbar-l { font-size:9px; }
  .topbar-r { font-size:9px; }
  .topbar-r input { width:100px; font-size:10px; }
  .topbar-btn { padding:2px 6px; font-size:9px; }

  /* Hero */
  .hero-section { grid-template-columns:1fr !important; min-height:auto; }
  .hero-left { padding:var(--sp-8) var(--sp-5); }
  .hero-right { padding:var(--sp-4); border-left:none; border-top:1px solid var(--silver); }
  .hero-right .globe { display:none; }
  .hero-right .hero-barcode { display:none; }
  .hero-title { font-size:var(--text-4xl) !important; }
  .hero-tagline { font-size:var(--text-xs); }
  .hero-pillars { font-size:9px; gap:var(--sp-2); }
  .vert-text { display:none; }

  /* Sections */
  .s-head { flex-wrap:wrap; padding:var(--sp-3) var(--sp-4); }
  .s-meta { display:none; }
  .s-body { padding:var(--sp-4); }

  /* Grids all go single column */
  .g2,.g3,.g4,.g5,.g6,.g8 { grid-template-columns:1fr; gap:var(--sp-4); }
  .vibe-grid { grid-template-columns:1fr; }
  .vibe-word { border-right:none; border-bottom:1px solid var(--silver); padding:var(--sp-5) var(--sp-4); }
  .color-row { flex-wrap:wrap; }
  .color-swatch { min-width:calc(33% - var(--sp-2)); }
  .icon-grid { grid-template-columns:repeat(5,minmax(0,1fr)); }
  .product-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .logo-grid { grid-template-columns:1fr 1fr; }
  .kpi-grid { grid-template-columns:1fr 1fr; }
  .ops-strip { grid-template-columns:1fr 1fr; }
  .temp-grid { grid-template-columns:1fr; }
  .trace-grid { grid-template-columns:1fr; }
  .social-grid { grid-template-columns:1fr; }
  .app-grid { grid-template-columns:1fr; }
  .a11y-grid { grid-template-columns:1fr; }
  .motion-grid { grid-template-columns:1fr 1fr; }
  .photo-grid { grid-template-columns:1fr 1fr; }
  .vis-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .elev-grid { grid-template-columns:1fr 1fr; }
  .states-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .rails-grid { grid-template-columns:1fr 1fr; }
  .flow-pipeline { overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .editorial-grid { grid-template-columns:1fr; }
  .chart-demo { grid-template-columns:1fr; }
  .brand-footer { grid-template-columns:1fr; text-align:left; }

  /* Tables */
  .demo-table { font-size:11px; }
  .demo-table th,.demo-table td { padding:var(--sp-2); }
  .scale-table th,.scale-table td { padding:var(--sp-2); font-size:10px; }
  .breakpoint-table th,.breakpoint-table td { padding:var(--sp-2); font-size:10px; }

  /* Touch targets — minimum 44px */
  .btn { min-height:44px; min-width:44px; padding:var(--sp-3) var(--sp-4); }
  .btn-sm { min-height:36px; }
  .input { min-height:44px; padding:var(--sp-3) var(--sp-4); font-size:16px; /* prevents iOS zoom */ }
  .toggle { min-width:44px; min-height:28px; }
  .tab { min-height:44px; padding:var(--sp-3) var(--sp-4); }
  .page-btn { min-width:44px; min-height:44px; }

  /* Prevent horizontal overflow */
  .page { overflow-x:hidden; }
  svg { max-width:100%; height:auto; }
  pre,code { overflow-x:auto; font-size:11px; }
  table { display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }

  /* Typography scale down */
  .type-display { font-size:var(--text-3xl); }
  .para-specimen { column-count:1; }

  /* Scroll nav hidden */
  .scroll-nav { display:none; }

  /* Dashboard mocks */
  .dash-body { grid-template-columns:1fr; }
  .dash-sidebar { display:none; }
  .dash-kpi-row { grid-template-columns:1fr 1fr; }
}

/* Small mobile (max 480px) */
@media (max-width:480px) {
  .hero-title { font-size:var(--text-3xl) !important; }
  .icon-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .product-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .kpi-grid { grid-template-columns:1fr; }
  .ops-strip { grid-template-columns:1fr; }
  .motion-grid { grid-template-columns:1fr; }
  .color-swatch { min-width:calc(50% - var(--sp-2)); }
  .topbar-r input { display:none; }
}

/* Safe area for notched phones */
@supports (padding: max(0px)) {
  .topbar { padding-left:max(var(--sp-4), env(safe-area-inset-left)); padding-right:max(var(--sp-4), env(safe-area-inset-right)); }
  .page { padding-left:max(var(--sp-4), env(safe-area-inset-left)); padding-right:max(var(--sp-4), env(safe-area-inset-right)); }
}

/* ══════════════════════════════════════════════════
   REDUCED MOTION — Accessibility
   ══════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .s { animation: none; }
  .kpi-val { animation: none; }
  .alert { animation: none; }
}

/* PRINT */
@media print{.topbar,.scroll-nav,.toc,.theme-toggle,.topbar-btn{display:none;}.s{break-inside:avoid;}}

/* ── THEME TOGGLE LABEL ── */
.topbar-btn[onclick*="toggleTheme"]::after{content:' Dark';font-size:9px;}
[data-theme="dark"] .topbar-btn[onclick*="toggleTheme"]::after{content:' Light';font-size:9px;}

/* ── COPY TOAST NOTIFICATION ── */
.copy-toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(100px);background:var(--cobalt);color:var(--white);font-family:'IBM Plex Mono',monospace;font-size:12px;padding:8px 20px;border-radius:4px;z-index:999;transition:transform var(--dur-med);pointer-events:none;}
.copy-toast.show{transform:translateX(-50%) translateY(0);}

/* Fix: Missing responsive rules for remaining components */
@media (max-width:767px) {
  .heatmap { grid-template-columns: repeat(7, 1fr); gap: 1px; }
  .sidebar-nav { width: 100%; }
  .modal-box { width: 95%; max-width: 95%; }
  .collateral-grid { grid-template-columns: 1fr; }
  .grad-row { flex-wrap: wrap; }
  .grad-swatch { min-width: calc(50% - var(--sp-2)); }
}

/* ══════════════════════════════════════════════════
   PREMIUM POLISH — The Details That Make It Mint
   ══════════════════════════════════════════════════ */

/* ── 1. Page Transition (fade on navigation) ── */
body { animation: pageEnter 0.3s ease-out; }
@keyframes pageEnter { from { opacity: 0; } to { opacity: 1; } }

/* ── 2. Gradient Text for Heroes ── */
.gradient-text {
  background: linear-gradient(135deg, var(--cobalt) 0%, var(--tufts) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hero-title {
  background: linear-gradient(135deg, var(--cobalt) 0%, var(--tufts) 50%, var(--cobalt) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
[data-theme="dark"] .hero-title {
  background: linear-gradient(135deg, var(--cobalt) 0%, var(--tufts) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── 3. Glass Card ── */
.glass-card {
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
[data-theme="dark"] .glass-card {
  background: rgba(17,17,17,0.7);
  border-color: rgba(255,255,255,0.08);
}

/* ── 4. Stagger Animations (cards/rows appear one by one) ── */
.stagger-enter > * {
  opacity: 0;
  transform: translateY(8px);
  animation: staggerIn 0.4s var(--ease-out) forwards;
}
.stagger-enter > *:nth-child(1)  { animation-delay: 0ms; }
.stagger-enter > *:nth-child(2)  { animation-delay: 50ms; }
.stagger-enter > *:nth-child(3)  { animation-delay: 100ms; }
.stagger-enter > *:nth-child(4)  { animation-delay: 150ms; }
.stagger-enter > *:nth-child(5)  { animation-delay: 200ms; }
.stagger-enter > *:nth-child(6)  { animation-delay: 250ms; }
.stagger-enter > *:nth-child(7)  { animation-delay: 300ms; }
.stagger-enter > *:nth-child(8)  { animation-delay: 350ms; }
.stagger-enter > *:nth-child(9)  { animation-delay: 400ms; }
.stagger-enter > *:nth-child(10) { animation-delay: 450ms; }
.stagger-enter > *:nth-child(n+11) { animation-delay: 500ms; }
@keyframes staggerIn { to { opacity: 1; transform: translateY(0); } }

/* ── 5. Gradient Borders ── */
.gradient-border {
  position: relative;
  border-radius: var(--radius-md);
}
.gradient-border::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(135deg, var(--cobalt), var(--tufts));
  z-index: -1;
}
.gradient-border-animate::before {
  background-size: 200% 200%;
  animation: gradientShift 3s ease infinite;
}
@keyframes gradientShift {
  0%,100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* ── 6. Glow Effects ── */
.glow-primary { box-shadow: 0 0 20px rgba(9,47,100,0.15), 0 0 40px rgba(9,47,100,0.05); }
.glow-success { box-shadow: 0 0 20px rgba(15,118,110,0.15), 0 0 40px rgba(15,118,110,0.05); }
.glow-error   { box-shadow: 0 0 20px rgba(220,38,38,0.15), 0 0 40px rgba(220,38,38,0.05); }
.glow-warning { box-shadow: 0 0 20px rgba(180,83,9,0.15), 0 0 40px rgba(180,83,9,0.05); }
.btn-primary:hover {
  box-shadow: 0 4px 14px rgba(9,47,100,0.25), 0 0 20px rgba(9,47,100,0.1);
}

/* ── 7. Smooth Scroll (scroll-padding update for fixed topbar) ── */
html { scroll-padding-top: 52px; }
[id] { scroll-margin-top: 52px; }

/* ── 8. Card Hover Parallax (subtle 3D tilt) ── */
.card-3d {
  transition: transform var(--dur-base) var(--ease-out);
  transform-style: preserve-3d;
  perspective: 800px;
}
.card-3d:hover {
  transform: perspective(800px) rotateX(2deg) rotateY(-2deg) translateY(-4px);
  box-shadow: var(--shadow-lg);
}

/* ── 9. Full Viewport Hero ── */
.hero-full {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* ── 10. Animated Underline Links ── */
.link-underline {
  text-decoration: none;
  position: relative;
}
.link-underline::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--ring);
  transition: width var(--dur-base) var(--ease-out);
}
.link-underline:hover::after { width: 100%; }

/* ── 11. Notification Badge ── */
.notification-badge { position: relative; }
.notification-badge::after {
  content: attr(data-count);
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  background: var(--error);
  color: #fff;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  font-weight: 700;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  border: 2px solid var(--background);
  line-height: 1;
}
.notification-badge[data-count="0"]::after { display: none; }

/* ── 12. Pulse Dot (live indicator) ── */
.pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--success);
  position: relative;
}
.pulse-dot::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: var(--success);
  opacity: 0.3;
  animation: pulseDot 2s ease-in-out infinite;
}
@keyframes pulseDot {
  0%,100% { transform: scale(1); opacity: 0.3; }
  50% { transform: scale(1.8); opacity: 0; }
}

/* ── 13. Divider with Label ── */
.divider-label {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  color: var(--muted-foreground);
  font-family: 'IBM Plex Mono', monospace;
  font-size: var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: .08em;
}
.divider-label::before,
.divider-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* ── 14. Truncate Utilities ── */
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── 15. Animated Number (CSS counter for KPIs) ── */
@property --num {
  syntax: '<integer>';
  initial-value: 0;
  inherits: false;
}
.count-up {
  transition: --num 1s var(--ease-out);
  counter-reset: num var(--num);
}
.count-up::after { content: counter(num); }

/* ── 16. Focus Within (parent highlights when child is focused) ── */
.focus-within:focus-within {
  border-color: var(--ring);
  box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--ring);
}

/* ── 17. Drag Handle ── */
.drag-handle {
  cursor: grab;
  color: var(--muted-foreground);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
}
.drag-handle:active {
  cursor: grabbing;
  color: var(--foreground);
}
.drag-handle::before { content: '\2807'; font-size: 14px; }

/* ── 19. Reduced Motion Override (premium animations) ── */
@media (prefers-reduced-motion: reduce) {
  body { animation: none; }
  .stagger-enter > * { animation: none; opacity: 1; transform: none; }
  .gradient-border-animate::before { animation: none; }
  .count-up { transition: none; }
  .pulse-dot::before { animation: none; }
}