/* ============================================================
   Rebound foundation — shared by every page in this portfolio.
   Tokens, type, nav + mobile menu, buttons, footer, back-to-top,
   reveal motion, and dark mode. Page-specific styles stay inline
   on each page (e.g. index.html case study, work.html landing).
   ============================================================ */
:root{
  /* ---- Rebound tokens (audited, exact) ---- */
  --ink:#1d1e20; --body:#3a3c40; --muted:#565960;
  --teal:#008296; --teal-700:#008296; --primary-hover:#006271; --orange:#bd5800; --orange-ink:#bd5800;   /* teal-700=Text/Primary, orange-ink=Text/Secondary, primary-hover=Surface/Primary/Default-Hover */
  --on:#ffffff;
  --surface:#ffffff; --surface-2:#f8f8f9; --primary-subtle:#f2f9fa; --inverse:#000000;
  --border:#b9bbbf; --border-subtle:#dcdddf;   /* was #e6e7e9 (off-token); #dcdddf = Gray/200 */
  /* ---- Rebound semantic tokens (Mapped/Light) — full ref in REBOUND.md ---- */
  --primary-subtle-hover:#bfe0e5; --on-color:#ffffff; --on-color-hover:#f1f1f2;
  --secondary:#bd5800; --secondary-hover:#8e4200; --secondary-subtle:#fcf7f2;
  --success:#047500; --success-hover:#035800; --success-subtle:#e6f1e5;
  --info:#0e7490; --info-hover:#0b576c; --info-subtle:#f3f8f9;
  --error:#bf0000; --error-hover:#800000; --error-subtle:#fef2f2;
  --warning:#bf5000; --warning-hover:#803600; --warning-subtle:#fef7f2;
  /* text (semantic values differ from surface in dark mode) */
  --text-heading:#1d1e20; --text-body:#3a3c40; --text-caption:#565960; --text-placeholder:#565960; --text-disabled:#737780;
  --text-primary:#008296; --text-primary-hover:#006271; --text-secondary:#bd5800; --text-secondary-hover:#8e4200;
  --text-success:#047500; --text-info:#0e7490; --text-error:#bf0000; --text-warning:#bf5000;
  /* border (semantic) */
  --border-disabled:#dcdddf; --border-primary:#008296; --border-primary-hover:#006271; --border-focus:#008296;
  --border-secondary:#ce8240; --border-success:#047500; --border-info:#0e7490; --border-error:#bf0000; --border-warning:#bf5000;
  /* icons (semantic) */
  --icon-standard:#565960; --icon-disabled:#737780; --on-icon:#ffffff; --icon-primary:#008296; --icon-primary-hover:#006271;
  --icon-secondary:#bd5800; --icon-success:#047500; --icon-info:#0e7490; --icon-error:#bf0000; --icon-warning:#bf5000;
  /* spacing */
  --s-3xs:4px; --s-2xs:6px; --s-xs:8px; --s-sm:12px; --s-md:16px; --s-lg:24px; --s-xl:32px; --s-2xl:48px; --s-3xl:64px; --s-4xl:80px;
  /* Responsive Spacing (Rebound Responsive collection) — desktop here; shrinks on mobile (see @media below) */
  --rs-3xs:2px; --rs-2xs:4px; --rs-xs:8px; --rs-sm:12px; --rs-md:16px; --rs-lg:24px; --rs-xl:32px; --rs-2xl:48px; --rs-3xl:64px; --rs-4xl:80px;
  /* radius — full Rebound Border Radius scale (px); Round=72 (pill) */
  --r-0:0; --r-50:4px; --r-100:6px; --r-200:12px; --r-300:16px; --r-400:20px; --r-500:24px; --r-600:28px; --r-700:32px; --r-800:40px; --r-round:72px;
  /* effects (audited) */
  --shadow-xs:0 1px 6px rgba(0,0,0,.04);
  --shadow-sm:0 2px 10px -1px rgba(0,0,0,.06);
  --shadow-md:0 4px 16px -3px rgba(0,0,0,.08);
  --shadow-lg:0 8px 28px -6px rgba(0,0,0,.10);
  --shadow-xl:0 16px 44px -12px rgba(0,0,0,.12);
  --hover-default:0 0 8px rgba(0,130,150,.10),0 0 3px 1px rgba(0,130,150,.60),0 0 6px 2px rgba(0,130,150,.15),0 0 10px 3px rgba(0,130,150,.20);
  --hover-inverse:0 0 8px rgba(255,255,255,.10),0 0 3px 1px rgba(255,255,255,.60),0 0 6px 2px rgba(255,255,255,.15),0 0 10px 3px rgba(255,255,255,.20);
  --ease:cubic-bezier(.23,1,.32,1);
  /* ---- Content Container (Rebound 8204:535): 1440 frame · 80 pad · 1280 content; margins 80/16/16 desktop/tablet/mobile ---- */
  --maxw:1440px; --content:1280px; --narrow:628px;
  --page-pad:clamp(16px,5.56vw,80px); --gutter:var(--page-pad);
  color-scheme:light dark;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;scroll-padding-top:var(--s-4xl);scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{font-family:"DM Sans",system-ui,sans-serif;color:var(--body);background:var(--surface);font-size:16px;line-height:1.55;padding-top:var(--s-3xl)}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--page-pad)}
.wrap.narrow{max-width:calc(var(--narrow) + var(--page-pad)*2)}   /* Content Container width=Narrow: 628 reading column */
/* full-bleed bars (nav, alerts) whose *content* must line up with the .wrap content edge */
.bleed-align{padding-inline:max(var(--page-pad),calc((100% - var(--maxw))/2 + var(--page-pad)))}
/* type helpers — full Rebound text ramp (px). DM Sans for UI/body/headings; DM Serif Display for Display only. */
.display{font-family:"DM Serif Display",Georgia,serif;font-weight:400;color:var(--ink);line-height:1.1;letter-spacing:-.01em}
.display-hero{font-family:"DM Serif Display",Georgia,serif;font-weight:400;color:var(--ink);font-size:3.75rem;line-height:1.2;letter-spacing:-.01em}       /* Display Hero 60/72 */
.display-callout{font-family:"DM Serif Display",Georgia,serif;font-weight:400;color:var(--ink);font-size:1.875rem;line-height:1.467;letter-spacing:-.01em} /* Display Callout 30/44 */
h1,h2,h3,h4{font-family:"DM Sans",sans-serif;color:var(--ink);letter-spacing:-.005em}
.h1{font-size:2.25rem;line-height:1.222;font-weight:600}   /* Heading/H1 36/44 */
.h2{font-size:1.75rem;line-height:1.143;font-weight:600}   /* Heading/H2 28/32 */
.h3{font-size:1.5rem;line-height:1.167;font-weight:600}    /* Heading/H3 24/28 */
.h4{font-size:1.25rem;line-height:1.2;font-weight:600}     /* Heading/H4 20/24 */
.body-lg{font-size:1.25rem;line-height:1.2}                /* Body/lg 20/24 */
.body-md{font-size:1rem;line-height:1.25}                  /* Body/md 16/20 */
.body-sm{font-size:.875rem;line-height:1.143}              /* Body/sm 14/16 */
.caption{font-size:.75rem;line-height:1.333}               /* Body/Caption 12/16 */
.eyebrow{font-size:.75rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--orange-ink)}
.muted{color:var(--muted)}

/* ---------- NAV ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;
  background:rgba(255,255,255,.7);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-lg);
  padding-block:var(--s-sm);padding-inline:max(var(--page-pad),calc((100% - var(--maxw))/2 + var(--page-pad)));
  border-bottom:1px solid transparent;transition:border-color .25s var(--ease),box-shadow .25s var(--ease)}
.nav.scrolled{border-bottom-color:var(--border-subtle);box-shadow:var(--shadow-xs)}
.nav .brand{display:flex;align-items:center;gap:var(--s-sm)}
.nav .brand svg{height:24px;width:auto;display:block}
.nav .brand .wm{font-family:"Space Grotesk","DM Sans",sans-serif;font-size:1.02rem;font-weight:500;color:var(--ink);letter-spacing:-.02em}
.nav .right{display:flex;align-items:center;gap:var(--s-lg)}
/* Nav Link — Rebound states: Default(body) / Hover(ink) / Focused(teal ring) / Current(teal) */
.nav .right a.link{font-size:.875rem;font-weight:500;color:var(--body);border-radius:var(--r-100);transition:color .18s var(--ease)}
.nav .right a.link:hover{color:var(--ink)}
.nav .right a.link:focus-visible{outline:2px solid var(--teal);outline-offset:4px}
.nav .right a.link[aria-current]{color:var(--teal)}
/* Nav Icon Button — Rebound states: Default / Pressed(surface-2 wash) / Focused(teal ring) */
.nav .right .li{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:var(--r-round);color:var(--muted);
  transition:color .18s var(--ease),background .18s var(--ease),transform .12s var(--ease)}
.nav .right .li:hover{background:var(--surface-2);color:var(--ink)}
.nav .right .li:active{background:var(--surface-2);transform:scale(.94)}
.nav .right .li:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.nav .right .li svg{height:18px;width:18px;display:block}

/* ---------- BUTTONS — Rebound "Button" component (Type × Size × State) ----------
   Type: default(solid) · subtle · outline(=ghost) · transparent
   Size: sm=28h · md=36h (default) · lg=48h   ·  Font: DM Sans Regular  ·  radius: pill
   Hover = fill/border darken to the *-Default-Hover surface token + the Hover/{State}
   colour glow (--hover-default). Fallback hexes so hover never collapses if a token
   fails to load. Specs read from the Rebound Figma Button set (node 215:34). */
.btn{--bt-fs:1rem;--bt-lh:1.25rem;--bt-py:var(--s-xs);--bt-px:var(--s-xs);--bt-gap:var(--s-xs);--bt-icon:16px;
  display:inline-flex;align-items:center;justify-content:center;gap:var(--bt-gap);white-space:nowrap;
  font-family:"DM Sans",system-ui,sans-serif;font-weight:500;font-size:var(--bt-fs);line-height:var(--bt-lh);
  padding:var(--bt-py) var(--bt-px);border:1px solid var(--teal);border-radius:var(--r-round);cursor:pointer;
  background:var(--teal);color:var(--on);
  transition:background .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease),box-shadow .2s var(--ease),transform .16s var(--ease)}
.btn>svg{width:var(--bt-icon);height:var(--bt-icon);display:block;flex:0 0 auto}
/* sizes */
.btn.sm{--bt-fs:.875rem;--bt-lh:1rem;--bt-py:var(--s-2xs);--bt-px:var(--s-xs);--bt-gap:var(--s-3xs);--bt-icon:12px}
.btn.lg{--bt-fs:1.25rem;--bt-lh:1.5rem;--bt-py:var(--s-sm);--bt-px:var(--s-sm);--bt-gap:var(--s-xs);--bt-icon:20px}
/* Type=Default (solid) */
.btn:hover{background:var(--primary-hover,#006271);border-color:var(--primary-hover,#006271);color:#f1f1f2;box-shadow:var(--hover-default)}
.btn:focus-visible{outline:none;box-shadow:var(--hover-default)}
.btn:active{transform:scale(.97)}
.btn:disabled,.btn[aria-disabled="true"]{background:#f1f1f2;border-color:transparent;color:#737780;box-shadow:none;transform:none;cursor:default;pointer-events:none}
/* Type=Subtle */
.btn.subtle{background:var(--primary-subtle);border-color:var(--primary-subtle);color:#006271}
.btn.subtle:hover{background:#bfe0e5;border-color:#bfe0e5;color:#006271;box-shadow:var(--hover-default)}
/* Type=Outline (ghost = alias) */
.btn.outline,.btn.ghost{background:transparent;border-color:var(--teal);color:var(--teal);box-shadow:none}
.btn.outline:hover,.btn.ghost:hover{background:#bfe0e5;border-color:var(--primary-hover,#006271);color:#006271;box-shadow:var(--hover-default)}
/* Type=Transparent */
.btn.transparent{background:transparent;border-color:transparent;color:var(--teal);box-shadow:none}
.btn.transparent:hover{background:transparent;border-color:transparent;color:var(--primary-hover,#006271);box-shadow:none}

/* ---------- CARD CONTAINER (Rebound 1562:5182) — 16px radius, neutral border, white surface ----------
   Static (rest only) vs Dynamic (interactive: hover = border→subtle-hover + Hover/Default glow, fill unchanged). */
.card{box-sizing:border-box;padding:var(--s-md);
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-300)}
.card.dynamic{transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.card.dynamic:hover{border-color:var(--primary-subtle-hover);box-shadow:var(--hover-default)}

/* ---------- BADGE (Rebound 716:18769) — subtle status chip; State × Size (sm/md/lg/xsm) ---------- */
.badge{display:inline-flex;align-items:center;gap:var(--s-3xs);font-family:"DM Sans",sans-serif;font-weight:400;line-height:1;
  font-size:.875rem;padding:var(--s-3xs) var(--s-xs);border:1px solid #e6f3f5;border-radius:var(--r-round);white-space:nowrap;
  background:var(--primary-subtle);color:var(--text-primary)}
.badge.xsm{font-size:.75rem;padding:var(--s-4xs) var(--s-2xs)}
.badge.outline{background:var(--surface);border-color:var(--border-primary);color:var(--text-primary)}
.badge.secondary{background:var(--secondary-subtle);border-color:var(--secondary-subtle);color:var(--text-body)}
.badge.success{background:var(--success-subtle);border-color:var(--border-success);color:var(--text-success)}
.badge.info{background:var(--info-subtle);border-color:var(--border-info);color:var(--text-info)}
.badge.error{background:var(--error-subtle);border-color:var(--border-error);color:var(--text-error)}
.badge.warning{background:var(--warning-subtle);border-color:var(--border-warning);color:var(--text-warning)}

/* ---------- INTERACTIVE TAG / filter chip (Rebound 958:7556) — Information-keyed; Selected toggle + Hover glow ---------- */
.chip{display:inline-flex;align-items:center;gap:var(--s-3xs);font-family:"DM Sans",sans-serif;font-weight:400;line-height:1;
  font-size:.875rem;padding:var(--s-3xs) var(--s-xs);border:1px solid var(--border-info);border-radius:var(--r-round);cursor:pointer;white-space:nowrap;
  background:var(--surface);color:var(--text-info);
  transition:background .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease),box-shadow .2s var(--ease)}
.chip[aria-pressed="true"],.chip.selected{background:var(--info-subtle)}
.chip:hover{background:var(--info-subtle);border-color:var(--info-hover);color:var(--info-hover);
  box-shadow:0 0 8px rgba(14,116,144,.10),0 0 3px 1px rgba(14,116,144,.60),0 0 6px 2px rgba(14,116,144,.15),0 0 10px 3px rgba(14,116,144,.20)}
.chip[disabled]{background:#f1f1f2;border-color:var(--border-disabled);color:var(--text-disabled);cursor:default;box-shadow:none}

/* ---------- MOBILE NAV (Rebound Device=Mobile: symbol + icon button -> full-screen menu) ---------- */
.nav-toggle{display:none;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border:none;background:none;color:var(--ink);cursor:pointer;border-radius:var(--r-round);
  transition:background .18s var(--ease),transform .12s var(--ease)}
.nav-toggle:hover{background:var(--surface-2)}
.nav-toggle:active{transform:scale(.94)}
.nav-toggle:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.nav-toggle svg{width:22px;height:22px;display:block}
.mobile-menu{position:fixed;inset:0;z-index:60;background:var(--surface);display:flex;flex-direction:column;
  padding:var(--s-sm) var(--gutter) var(--s-2xl);opacity:0;transform:translateY(-6px);pointer-events:none;
  transition:opacity .25s var(--ease),transform .25s var(--ease)}
.mobile-menu.open{opacity:1;transform:none;pointer-events:auto}
.mm-top{display:flex;align-items:center;justify-content:space-between;min-height:56px}
.mm-top .brand{display:flex;align-items:center;gap:var(--s-sm)}
.mm-top .brand svg{height:26px;width:auto;display:block}
.mm-top .brand span{font-family:"Space Grotesk","DM Sans",sans-serif;font-weight:500;font-size:1.08rem;letter-spacing:-.02em;color:var(--ink)}
.mm-links{display:flex;flex-direction:column;margin-top:var(--s-xl)}
.mm-links a{display:flex;align-items:center;justify-content:space-between;gap:var(--s-md);padding:var(--s-md) 0;
  font-size:1.5rem;font-weight:500;color:var(--ink);border-bottom:1px solid var(--border-subtle);transition:color .15s var(--ease)}
.mm-links a:active,.mm-links a[aria-current]{color:var(--teal)}
.mm-links a svg{width:20px;height:20px;color:var(--muted);flex:0 0 auto}
.mm-foot{margin-top:auto;display:flex;flex-direction:column;gap:var(--s-md);padding-top:var(--s-xl)}
.mm-avail{display:flex;align-items:center;gap:var(--s-xs);color:var(--muted);font-size:.92rem;font-weight:500}
.mm-avail .dot{width:9px;height:9px;border-radius:var(--r-round);background:var(--success);box-shadow:0 0 0 3px rgba(4,117,0,.18)}
.mm-foot .btn{width:100%;justify-content:center;padding-block:var(--s-sm);font-size:1rem}
@media(max-width:720px){.nav .wm{display:none}.nav .right{display:none}.nav-toggle{display:inline-flex}}
@media(min-width:721px){.mobile-menu{display:none}}

/* ---------- FOOTER — Rebound "Footer" component (3042:271): pinned-dark; lead + link columns, hairline rule, bottom bar.
   Dark-mode token VALUES are literals here because the footer never flips (same pinned-dark rule as .heart). ---------- */
.foot{background:var(--inverse);padding-block:var(--s-3xl) var(--s-xl)}
.foot-in{display:flex;flex-direction:column;gap:var(--s-2xl)}
.foot-top{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s-2xl);flex-wrap:wrap}
.foot-lead{display:flex;flex-direction:column;gap:var(--s-md);max-width:44ch}
.foot-lead h2{font-family:"DM Serif Display",serif;font-weight:400;color:#f8f8f9;font-size:clamp(30px,4vw,44px);line-height:1.08;letter-spacing:-.01em}
.foot-avail{color:#dcdddf;font-size:1rem;line-height:1.25}
.foot-link{display:inline-flex;align-items:center;gap:6px;width:fit-content;color:#80c1cb;font-weight:500;font-size:1rem;line-height:1.25;transition:color .18s var(--ease)}
.foot-link:hover{color:#bfe0e5}
.foot-cols{display:flex;gap:var(--s-2xl)}
/* hierarchy: the column label is a QUIET caption (small, dimmed to the dark placeholder token),
   the links are the prominent scannable items; extra space under the label groups each list. */
.foot-col{display:flex;flex-direction:column;gap:var(--s-sm)}
.foot-coltitle{color:#9699a0;font-weight:600;font-size:.75rem;line-height:1.33;letter-spacing:.1em;margin:0 0 var(--s-2xs)}
.foot-col a{color:#f1f1f2;font-weight:400;font-size:1rem;line-height:1.25;transition:color .18s var(--ease)}
.foot-col a span[aria-hidden]{opacity:.5}   /* the ↗ is an affordance hint, not a peer of the label */
.foot-col a:hover{color:#80c1cb}
.foot-rule{height:1px;width:100%;background:#737780}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;gap:var(--s-md);flex-wrap:wrap}
.foot-copy{display:flex;align-items:center;gap:var(--s-md)}
.foot-copy svg{height:22px;width:auto;display:block}
.foot-copy span{color:#dcdddf;font-size:.875rem;line-height:1.14}
.foot-totop{display:inline-flex;align-items:center;gap:6px;color:#f1f1f2;font-weight:500;font-size:.875rem;transition:color .18s var(--ease)}
.foot-totop:hover{color:#80c1cb}
.foot-link:focus-visible,.foot-col a:focus-visible,.foot-totop:focus-visible,.foot-copy a:focus-visible{outline:2px solid #80c1cb;outline-offset:3px;border-radius:2px}
@media(max-width:720px){
  .foot{padding-block:var(--s-xl) var(--s-lg)}
  .foot-in{gap:var(--s-xl)}
  .foot-top{flex-direction:column;gap:var(--s-xl)}
  .foot-cols{width:100%;gap:var(--s-xl)}
  .foot-col{flex:1 1 0;min-width:0}
}

/* ---------- BACK TO TOP ---------- */
.to-top{position:fixed;right:clamp(16px,3vw,28px);bottom:clamp(16px,3vw,28px);z-index:55;
  width:46px;height:46px;border:1px solid var(--border-subtle);border-radius:var(--r-round);background:var(--surface);color:var(--ink);cursor:pointer;
  display:grid;place-items:center;box-shadow:var(--shadow-md);opacity:0;transform:translateY(8px) scale(.95);pointer-events:none;
  transition:opacity .25s var(--ease),transform .25s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease)}
.to-top.show{opacity:1;transform:none;pointer-events:auto}
.to-top:hover{box-shadow:var(--hover-default);border-color:var(--teal);color:var(--teal)}
.to-top:active{transform:scale(.93)}
.to-top:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.to-top svg{width:20px;height:20px;display:block}

/* ---------- REVEAL ---------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ---------- RESPONSIVE TYPE (shared headings step down on mobile) ---------- */
@media(max-width:640px){
  /* Rebound Responsive/Mobile type step-downs */
  .h1{font-size:1.75rem;line-height:1.429}            /* H1 36->28 */
  .h2{font-size:1.5rem;line-height:1.25}              /* H2 28->24 */
  .h3{font-size:1.25rem;line-height:1.2}              /* H3 24->20 */
  .h4{font-size:1rem;line-height:1.25}                /* H4 20->16 */
  .display-hero{font-size:2rem;line-height:1.25}      /* Display 60->32 */
  .display-callout{font-size:1.5rem;line-height:1.25} /* Callout 30->24 */
  .foot h2{font-size:2rem}
  /* Rebound Responsive/Mobile spacing (--rs-* shrink) */
  :root{--rs-sm:8px;--rs-md:8px;--rs-lg:16px;--rs-xl:16px;--rs-2xl:24px;--rs-3xl:24px;--rs-4xl:16px;--page-pad:16px}   /* Content Container margin: Mobile=16 */
}

/* ---------- DARK MODE (values from Rebound Mapped/Dark collection) ---------- */
@media(prefers-color-scheme:dark){
  :root{
    --ink:#f8f8f9; --body:#f1f1f2; --muted:#dcdddf;
    --teal:#008296; --teal-700:#80c1cb; --orange:#deac80; --orange-ink:#deac80;
    --on:#ffffff;
    --surface:#000000; --surface-2:#0e0f10; --primary-subtle:#006271; --inverse:#000000;
    --border:#737780; --border-subtle:#2b2d31;
    --primary-subtle-hover:#008296; --on-color-hover:#3a3c40;
    --secondary:#bd5800; --secondary-hover:#8e4200; --secondary-subtle:#8e4200;
    --success:#047500; --success-hover:#035800; --success-subtle:#023b00;
    --info:#0e7490; --info-hover:#0b576c; --info-subtle:#073a48;
    --error:#bf0000; --error-hover:#800000; --error-subtle:#800000;
    --warning:#bf5000; --warning-hover:#803600; --warning-subtle:#803600;
    --text-heading:#f8f8f9; --text-body:#f1f1f2; --text-caption:#dcdddf; --text-placeholder:#9699a0; --text-disabled:#737780; --on-color:#000000;
    --text-primary:#80c1cb; --text-primary-hover:#bfe0e5; --text-secondary:#deac80; --text-secondary-hover:#efd5bf;
    --text-success:#81ba80; --text-info:#86b9c7; --text-error:#ff8080; --text-warning:#ffb580;
    --border-disabled:#565960; --border-primary:#80c1cb; --border-primary-hover:#bfe0e5; --border-focus:#80c1cb;
    --border-secondary:#deac80; --border-success:#81ba80; --border-info:#86b9c7; --border-error:#ff8080; --border-warning:#ffb580;
    --icon-standard:#dcdddf; --icon-disabled:#737780; --on-icon:#ffffff; --icon-primary:#80c1cb; --icon-primary-hover:#bfe0e5;
    --icon-secondary:#deac80; --icon-success:#81ba80; --icon-info:#86b9c7; --icon-error:#ff8080; --icon-warning:#ffb580;
    --shadow-xs:0 1px 6px rgba(0,0,0,.6);
    --shadow-sm:0 2px 10px -1px rgba(0,0,0,.65);
    --shadow-md:0 4px 16px -3px rgba(0,0,0,.7);
    --shadow-lg:0 8px 28px -6px rgba(0,0,0,.75);
    --shadow-xl:0 16px 44px -12px rgba(0,0,0,.8);
  }
  .nav{background:rgba(6,6,7,.72)}
  .nav.scrolled{border-bottom-color:var(--border-subtle);box-shadow:0 1px 0 rgba(255,255,255,.04)}
  .foot{border-top:1px solid var(--border-subtle)}
}