/* ============================================================================
   MINTMARBLES - design tokens · v6 "Mint & Marble"
   Direction: premium offline-software SaaS. Violet primary + fresh MINT trust
   accent + Etsy-orange purchase CTA on a soft violet-white canvas. Signature:
   glossy marble spheres (radial-gradient orbs with a specular highlight).
   ========================================================================== */
:root{
  /* ---- brand: deeper, more restrained indigo (v2) ---- */
  --brand:#4F3FE8; --brand-600:#4536CC; --brand-700:#332AA0; --brand-800:#221C6E;
  --brand-050:#EFEDFE; --brand-100:#DEDAFC; --brand-200:#C0B9FA;
  --brand-weak:color-mix(in srgb,var(--brand) 12%,transparent);
  /* ---- mint/teal: the one accent, used with intent (offline / private / owned) ---- */
  --mint:#14C9A6; --mint-600:#0EA383; --mint-700:#0B8069;
  --mint-050:#E1FAF3; --mint-100:#C9F3E5; --mint-200:#9DE8CE;
  --mint-weak:color-mix(in srgb,var(--mint) 14%,transparent);
  /* ---- Etsy: purchase affordance ---- */
  --etsy:#F1641E; --etsy-600:#DE560F; --etsy-700:#B8440A; --etsy-050:#FDECE1;
  /* ---- product visual accents ---- */
  --violet:#5B45FF; --cyan:#12B5C9; --orange:#FF6A2C;

  /* ---- gradients ---- */
  --grad-brand:linear-gradient(135deg,#7C6BFF 0%,#5B4BFF 48%,#3B32B8 100%);
  --grad-mint:linear-gradient(135deg,#4FE8BE 0%,#0FCE93 55%,#068462 100%);
  --grad-duo:linear-gradient(120deg,#5B45FF 0%,#7E5CF6 40%,#12C6C0 78%,#0FCE93 100%);
  --grad-violet:linear-gradient(135deg,#7C6BFF,#5B45FF 60%,#3A27C6);
  --grad-cyan:linear-gradient(135deg,#3ED8E8,#12B5C9 60%,#0A8494);
  --grad-orange:linear-gradient(135deg,#FF9152,#FF6A2C 60%,#E0470F);
  --grad-etsy:linear-gradient(135deg,#FF8B4C,#F1641E 60%,#C9490C);
  --grad-text:linear-gradient(100deg,#5B45FF 0%,#7A5CF6 42%,#0FCE93 100%);
  /* atmospheric hero mesh */
  --mesh:
    radial-gradient(48% 55% at 12% 8%, color-mix(in srgb,var(--brand) 30%,transparent), transparent 60%),
    radial-gradient(42% 50% at 88% 4%, color-mix(in srgb,var(--mint) 26%,transparent), transparent 58%),
    radial-gradient(60% 55% at 66% 100%, color-mix(in srgb,#8E7BFF 24%,transparent), transparent 62%);

  /* ---- marble sphere surfaces (glossy, 3D) ---- */
  --marble-violet:radial-gradient(circle at 34% 28%, #FFFFFF 0%, #CFC7FF 12%, #6D5BFF 44%, #3B32B8 84%, #241C7A 100%);
  --marble-mint:radial-gradient(circle at 34% 28%, #FFFFFF 0%, #A9F4DA 12%, #17D69B 46%, #068462 84%, #04543F 100%);
  --marble-orange:radial-gradient(circle at 34% 28%, #FFFFFF 0%, #FFD0B0 12%, #FF8A4E 46%, #E0470F 84%, #8F2C06 100%);
  --marble-duo:radial-gradient(circle at 34% 28%, #FFFFFF 0%, #BDF6F0 12%, #1DE5D7 40%, #4F46E5 82%, #241C7A 100%);
  --marble-glass:radial-gradient(circle at 34% 28%, rgba(255,255,255,.95) 0%, rgba(230,226,255,.7) 16%, rgba(123,107,255,.28) 52%, rgba(58,39,198,.14) 100%);

  /* ---- ink ramp (cool violet-slate) ---- */
  --ink:#14122B; --ink-2:#33314F; --ink-soft:#5C5A78; --ink-faint:#8B89A6; --ink-inv:#FFFFFF;
  /* ---- surfaces ---- */
  --bg:#F6F6FB; --bg-2:#EEEEF7; --bg-3:#E4E4F2;
  --surface:#FFFFFF; --surface-2:#FAFAFE; --surface-tint:#EFEDFF;
  --mint-tint:#EFFCF6;
  /* ---- lines ---- */
  --line:#E6E6F0; --line-2:#D6D6E6; --line-3:#BFBFD6;
  /* ---- status ---- */
  --ok:#0FA968; --ok-w:#E3F8ED; --warn:#C77D0A; --warn-w:#FBF0DC; --err:#E0364C; --err-w:#FCE6EA;
  /* ---- dark sections ---- */
  --ink-bg:#100E24; --ink-bg-2:#191632; --ink-line:rgba(255,255,255,.10);

  /* ---- type ---- */
  --f-disp:"Montserrat", sans-serif;
  --f-body:"Montserrat", sans-serif;
  --f-mono:"Montserrat", sans-serif;
  /* fluid scale */
  --fs-display:clamp(2.85rem,1.6rem + 5vw,5.6rem);
  --fs-h1:clamp(2.5rem,1.6rem + 3.8vw,4.6rem);
  --fs-h2:clamp(2rem,1.35rem + 2.6vw,3.35rem);
  --fs-h3:clamp(1.35rem,1.08rem + 1.05vw,1.9rem);
  --fs-lead:clamp(1.06rem,.98rem + .5vw,1.32rem);
  --fs-small:.9rem; --fs-caption:.8rem;

  /* ---- spacing ---- */
  --s-1:.25rem; --s-2:.5rem; --s-3:.75rem; --s-4:1rem; --s-5:1.5rem; --s-6:2rem; --s-7:3rem; --s-8:4.5rem; --s-9:6.5rem;
  /* ---- radii ---- */
  --r-xs:8px; --r-sm:12px; --r-md:16px; --r-lg:22px; --r-xl:28px; --r-2xl:36px; --r-3xl:44px; --r-pill:999px;
  /* ---- shadows ---- */
  --sh-1:0 1px 2px rgba(20,18,43,.05),0 1px 1px rgba(20,18,43,.04);
  --sh-2:0 2px 6px rgba(20,18,43,.06),0 14px 32px rgba(20,18,43,.08);
  --sh-3:0 14px 44px rgba(20,18,43,.13),0 5px 14px rgba(20,18,43,.07);
  --sh-4:0 30px 70px rgba(20,18,43,.18),0 10px 24px rgba(20,18,43,.10);
  --sh-brand:0 16px 40px color-mix(in srgb,var(--brand) 34%,transparent);
  --sh-mint:0 14px 34px color-mix(in srgb,var(--mint) 34%,transparent);
  --sh-etsy:0 14px 34px color-mix(in srgb,var(--etsy) 36%,transparent);
  --sh-window:0 48px 100px rgba(20,18,43,.24),0 16px 40px rgba(20,18,43,.14);
  --sh-marble:0 18px 34px rgba(20,18,43,.24),inset 0 -6px 14px rgba(0,0,0,.28),inset 0 6px 12px rgba(255,255,255,.5);
  --ring:0 0 0 4px var(--brand-weak);

  /* ---- layout ---- */
  --wrap:1200px; --wrap-narrow:840px; --wrap-text:72ch;
  --nav-h:68px;
  /* ---- flow lines: organic connective strokes (replaces grid marks) ---- */
  --flow-1:var(--brand); --flow-2:var(--mint); --flow-3:#8E7BFF;
  /* ---- motion ---- */
  --dur:.22s; --dur-slow:.5s;
  --ease:cubic-bezier(.2,.7,.3,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);

  /* generic accent aliases so product components resolve */
  --accent:var(--brand); --grad-accent:var(--grad-brand);
  /* back-compat aliases (legacy token names) */
  --paper:var(--bg); --paper-2:var(--bg-2); --paper-3:var(--bg-3);
  --font-mono:var(--f-mono); --font-display:var(--f-disp); --font-body:var(--f-body);
}
@media (prefers-reduced-motion:reduce){
  :root{--dur:.001ms;--dur-slow:.001ms}
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}