/* Tokihana — Effect tokens: radii, shadows, gradients, motion */

:root {
  /* ---------- Radii ---------- */
  --radius-xs:   6px;    /* chip inner tag */
  --radius-sm:   8px;
  --radius-md:   10px;
  --radius-lg:   14px;   /* stat card */
  --radius-xl:   16px;   /* button, comparison table */
  --radius-2xl:  18px;   /* card, step card */
  --radius-3xl:  20px;   /* phone mockup */
  --radius-pill: 999px;

  /* ---------- Shadows ---------- */
  /* Warm ink shadow — never a cold neutral. */
  --shadow-hairline: 0 0 0 1px rgba(40,30,20,.06);
  --shadow-card:     0 2px 8px rgba(40,30,20,.05);
  --shadow-raised:   0 3px 12px rgba(40,30,20,.06);
  --shadow-mock:     0 6px 18px rgba(40,30,20,.10);
  --shadow-float:    0 8px 22px rgba(40,30,20,.14);
  --shadow-frame:    0 20px 60px rgba(40,30,20,.14);   /* device frame */

  /* Brand-tinted CTA shadow */
  --shadow-cta:      0 8px 22px rgba(98,168,196,.30);
  --shadow-cta-lg:   0 8px 24px rgba(98,168,196,.30);
  --shadow-pill-cta: 0 3px 8px rgba(98,168,196,.30);

  /* ---------- Gradients ---------- */
  --grad-brand-soft:  linear-gradient(135deg, #CBE3EC, #FFFFFF);   /* @kind color */
  --grad-brand-cool:  linear-gradient(135deg, #A8D1E0, #FFFFFF);   /* @kind color */
  --grad-avatar:      linear-gradient(150deg, #CBE3EC, #FFFFFF);   /* @kind color */
  --grad-cta-section: linear-gradient(165deg, #E9F3F7 0%, #FFFFFF 100%); /* @kind color */
  --grad-scene:       linear-gradient(150deg, #CBE3EC, #FFFFFF);   /* @kind color */

  /* Photo edge fade — used to feather KV imagery into the page bg. */
  --fade-app: #FBFCFD;   /* @kind color */

  /* ---------- Motion ---------- */
  --dur-fast:   140ms;   /* @kind other */
  --dur-med:    220ms;   /* @kind other */
  --dur-slow:   360ms;   /* @kind other */
  --ease-out:   cubic-bezier(0.22, 0.61, 0.36, 1);   /* @kind other */
  --ease-in:    cubic-bezier(0.55, 0, 0.66, 0.24);   /* @kind other */
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);      /* @kind other */

  /* ---------- Interaction ---------- */
  --hover-lift:    translateY(-1px);   /* @kind other */
  --press-scale:   scale(.985);        /* @kind other */
  --hover-alpha:   .85;                /* @kind other */

  /* Focus ring */
  --ring:          var(--shadow-cta);   /* @kind shadow */
}