/* =========================================================
   DESTINY — DESIGN TOKENS
   =========================================================
   Single source of truth. Edit here → propagates to:
     - index.html
     - case.html
     - design-system.html
   ========================================================= */
:root{
  /* —— Color · Brand & UI —— */
  --c-ink:        #0E2A2A;
  --c-bone:       #F4F2EC;
  --c-mist:       #E8EFE6;
  --c-sage:       #CFE0C3;
  --c-sky:        #C9DBE8;
  --c-lemon:      #E8EDA4;
  --c-sand:       #E8DCC4;
  --c-plum:       #DCD3E0;
  --c-clay:       #E2C9B9;
  --c-line:       rgba(14,42,42,0.15);
  --c-line-soft:  rgba(14,42,42,0.08);

  /* —— Color · Accent —— */
  --c-accent-mint:  #7DD3C0;
  --c-accent-white: #FFFFFF;

  /* —— Typography —— */
  --f-display: 'Lato', system-ui, sans-serif;
  --f-body:    'Lato', system-ui, sans-serif;
  --f-mono:    'Lato', system-ui, sans-serif;

  /* —— Spacing —— */
  --pad-x: clamp(20px, 4vw, 64px);
  --maxw:  1440px;

  /* —— Radii —— */
  --r-xs:   4px;
  --r-sm:   6px;
  --r-md:   12px;
  --r-pill: 100px;
  --r-full: 9999px;

  /* —— Motion —— */
  --ease-standard: cubic-bezier(.65, .05, .36, 1);
  --ease-out:      ease-out;
  --dur-fast:    0.25s;
  --dur-base:    0.35s;
  --dur-slow:    0.55s;
  --dur-xslow:   0.85s;

  /* —— Hairlines —— */
  --hairline:      1px solid var(--c-line);
  --hairline-soft: 1px solid var(--c-line-soft);

  /* —— Composite gradients —— */
  --grad-accent-line: linear-gradient(to right,
    transparent 0%,
    rgba(125,211,192,0) 10%,
    var(--c-accent-mint) 50%,
    var(--c-accent-white) 80%,
    transparent 100%);
  --grad-accent-stroke: linear-gradient(110deg,
    transparent 0%,
    rgba(125,211,192,0) 25%,
    var(--c-accent-mint) 50%,
    var(--c-accent-white) 65%,
    rgba(125,211,192,0) 80%,
    transparent 100%);

  /* —— Transitions —— */
  --bg-trans: background-color 0.35s ease-out, color 0.35s ease-out;
}