/* =====================================================
   Design Tokens — dbs Salon Premium System
   ===================================================== */
:root{
  /* Color — Brand */
  --c-bg:#f9f9f9;
  --c-bg-alt:#fdf6ef;
  --c-ink:#0c0c0c;
  --c-ink-2:#1e1e1e;
  --c-muted:#6d6d6d;
  --c-line:rgba(12,12,12,.08);
  --c-line-2:rgba(12,12,12,.15);

  /* Color — Brand */
  --c-teal:#1eb7bf;
  --c-teal-deep:#168a90;
  --c-teal-soft:#d4f1f3;
  --c-purple:#8224e3;
  --c-purple-soft:#ece0fb;
  --c-cream:#fdf6ef;
  --c-coral:#ff7a59;
  --c-gold:#c89b3c;

  /* Color — Functional */
  --c-success:#16a34a;
  --c-error:#dc2626;
  --c-warning:#f59e0b;

  /* Type */
  --f-display:"Fraunces","Cormorant Garamond",Georgia,serif;
  --f-body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,Menlo,monospace;

  /* Type Scale (clamp) */
  --t-xs:clamp(.72rem,.7rem + .1vw,.78rem);
  --t-sm:clamp(.85rem,.82rem + .15vw,.92rem);
  --t-base:clamp(.95rem,.9rem + .25vw,1.05rem);
  --t-md:clamp(1.05rem,1rem + .35vw,1.2rem);
  --t-lg:clamp(1.25rem,1.1rem + .6vw,1.55rem);
  --t-xl:clamp(1.6rem,1.3rem + 1.2vw,2.1rem);
  --t-2xl:clamp(2.1rem,1.6rem + 2vw,3.2rem);
  --t-3xl:clamp(2.6rem,2rem + 2.8vw,4.4rem);
  --t-4xl:clamp(3.2rem,2.2rem + 4vw,6rem);
  --t-display:clamp(4rem,3rem + 5.5vw,9rem);

  /* Spacing */
  --s-0:.25rem;
  --s-1:.5rem;
  --s-2:.75rem;
  --s-3:1rem;
  --s-4:1.5rem;
  --s-5:2rem;
  --s-6:3rem;
  --s-7:4.5rem;
  --s-8:6rem;
  --s-9:8rem;
  --s-10:11rem;

  /* Radius */
  --r-xs:4px;
  --r-sm:8px;
  --r-md:14px;
  --r-lg:22px;
  --r-xl:34px;
  --r-pill:999px;

  /* Shadow */
  --sh-1:0 1px 2px rgba(12,12,12,.04), 0 6px 18px rgba(12,12,12,.06);
  --sh-2:0 4px 10px rgba(12,12,12,.06), 0 16px 40px rgba(12,12,12,.10);
  --sh-3:0 12px 30px rgba(12,12,12,.10), 0 30px 80px rgba(12,12,12,.16);
  --sh-glow:0 0 0 6px rgba(30,183,191,.18);
  --sh-glow-p:0 0 0 6px rgba(130,36,227,.18);

  /* Motion */
  --d-1:.18s;
  --d-2:.32s;
  --d-3:.55s;
  --d-4:.9s;
  --d-5:1.4s;
  --ease-out:cubic-bezier(.2,.7,.2,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --ease-back:cubic-bezier(.5,-0.5,.3,1.5);

  /* Layout */
  --container:1280px;
  --container-narrow:920px;
  --container-wide:1480px;
  --header-h:84px;
  --header-h-min:64px;

  /* Cursor */
  --cursor-size:32px;
  --cursor-dot:6px;
}

@media (max-width:780px){
  :root{
    --s-7:3.5rem;
    --s-8:4.5rem;
    --s-9:6rem;
    --s-10:7rem;
    --cursor-size:0px;
  }
}