/* Ink Gang Boss tokens. Mirrors DESIGN.md front matter (merged 2026-09-29). Look is the locked Dec 2025 style. Do not add values here that are not in DESIGN.md. */
:root{
  /* color: locked */
  --cream:#F1EADB;                                /* off-white: replaces pure white everywhere (from scene-engrave-on) */
  --primary:#4F0056; --on-primary:#F1EADB;
  --secondary:#D01678; --on-secondary:#F1EADB;   /* fills and large text only */
  --magenta-text:#F25AA5;                         /* small magenta text, links, badges on dark */
  --base:#000000; --on-base:#F1EADB;
  --surface-testimonials:#2A002D; --surface-shop:#1A001C;
  --gradient-violet:#9C27B0; --star:#FFD700; --star-on-light:#9A6200;
  --card-light:#F1EADB; --on-card-light:#1A1A1A;
  --neutral-900:#1A1A1A; --neutral-850:#222222; --neutral-800:#333333;
  --border:rgba(241,234,219,.1); --muted:rgba(241,234,219,.7); --muted-strong:rgba(241,234,219,.8);
  --nav-glass:rgba(0,0,0,.6);
  --focus-on-dark:#F1EADB; --focus-on-light:#1A1A1A;
  --error:#FF6B6B; --success:#5BD69A;

  /* scene defaults (overridden per scene; art backgrounds only) */
  --scene-bg:var(--base); --scene-on:var(--on-base);
  --ring:var(--focus-on-dark); --scene-star:var(--star);

  /* type: Barlow only */
  --font:"Barlow",system-ui,sans-serif;
  --fs-hero:clamp(2.5rem,9vw + .5rem,4.5rem);
  --fs-hero-sub:clamp(1.125rem,1rem + 1vw,1.5rem);
  --fs-shop:clamp(2.75rem,10vw + .5rem,5rem);
  --fs-section:clamp(2.25rem,7vw + .75rem,4rem);
  --fs-card:1.5rem;
  --fs-body:1.1rem; --fs-label:.85rem; --fs-button:.9rem; --fs-wordmark:1.1rem;
  --fs-price:clamp(1.5rem,1.3rem + .6vw,1.75rem);

  /* radius */
  --r-button:4px; --r-card:12px; --r-thumb:12px; --r-pill:100px;
  --r-blob:42% 58% 55% 45% / 48% 42% 58% 52%;

  /* spacing */
  --s-xs:4px; --s-sm:8px; --s-md:16px; --s-lg:32px; --s-xl:64px;
  --section:40px; --gutter:20px; --max:1280px; --nav-max:1100px;

  /* elevation */
  --sh-nav:0 10px 30px rgba(0,0,0,.5);
  --sh-card:0 10px 30px rgba(0,0,0,.3);
  --sh-thumb:0 20px 40px rgba(0,0,0,.4);

  /* motion */
  --ease:.3s ease; --thumb-zoom:.5s ease;
  --drip:480ms cubic-bezier(.65,0,.35,1);
  --reveal:240ms cubic-bezier(.22,1,.36,1);
}
@media (min-width:768px){:root{--section:64px}}
@media (min-width:1024px){:root{--gutter:48px}}

/* scenes: art backgrounds; UI chrome keeps the locked palette */
[data-scene="sketchbox"]{--scene-bg:#0C1A2B;--scene-on:#F1EADB}   /* deep sea, to match the original hero art */
[data-scene="vintage"]  {--scene-bg:#12130E;--scene-on:#F1EADB}   /* dark to match the original hero art */
[data-scene="cray"]     {--scene-bg:#FFF3D6;--scene-on:#221726;--ring:var(--focus-on-light);--scene-star:var(--star-on-light)}
[data-scene="samurai"]  {--scene-bg:#EEE8E3;--scene-on:#1C1A1E;--ring:var(--focus-on-light);--scene-star:var(--star-on-light)}   /* rice paper, to match the original ink-wash hero */
[data-scene="office"]   {--scene-bg:#FAF5E8;--scene-on:#1A1A1A;--ring:var(--focus-on-light);--scene-star:var(--star-on-light)}
[data-scene="engrave"]  {--scene-bg:#FFFFFF;--scene-on:#141414;--ring:var(--focus-on-light);--scene-star:var(--star-on-light)}   /* white page, matches hero b */

/* shared primitives */
:focus-visible{outline:2px solid var(--ring);outline-offset:3px}
.on-light{--ring:var(--focus-on-light)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:0 35px;border-radius:var(--r-button);
  font:700 var(--fs-button)/1 var(--font);letter-spacing:1px;text-transform:uppercase;text-decoration:none;cursor:pointer;border:1px solid transparent;
  transition:background-color var(--ease),color var(--ease),border-color var(--ease),transform var(--ease)}
.btn-primary{background:var(--secondary);color:var(--on-secondary)}
.btn-primary:hover,.btn-primary:active{background:#F1EADB;color:var(--secondary);transform:translateY(-3px)}
.btn-secondary{background:transparent;color:var(--on-base);border-color:var(--muted)}
.btn-secondary:hover,.btn-secondary:active{background:#F1EADB;color:var(--primary);border-color:#F1EADB;transform:translateY(-3px)}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.4;cursor:default;transform:none}
.label{font:700 var(--fs-label)/1.2 var(--font);letter-spacing:1px;text-transform:uppercase}
.price{font:800 var(--fs-price)/1 var(--font);font-variant-numeric:tabular-nums}

@keyframes igb-gradient{0%{background-position:0% 50%}100%{background-position:200% 50%}}
.igb-gradient-text{background:linear-gradient(90deg,#D01678,#9C27B0,#D01678);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:igb-gradient 5s linear infinite}

@media (prefers-reduced-motion:reduce){
  .igb-gradient-text{animation-play-state:paused}
  .btn:hover,.btn:active{transform:none}
  *,*::before,*::after{transition-property:color,background-color,border-color!important}
}