/* ============================================================
   WICKO TOKENS — v1.0
   Shared design DNA for the Wicko Skills library.
   Every skill inherits from these tokens so the family reads
   as a unit. Override any --w-* variable to retheme.

   Extracted from the Wicko Pill Nav signature.
   ============================================================ */

:root {
  /* ─── COLOR ─── */
  --w-cream:           #fdf6ec;                       /* surface — pill, cards */
  --w-cream-soft:      rgba(253, 246, 236, 0.92);     /* translucent surface */
  --w-cream-strong:    rgba(253, 246, 236, 0.98);     /* solid-ish surface */
  --w-ink:             #2f2f2f;                       /* primary text */
  --w-ink-soft:        rgba(47, 47, 47, 0.6);         /* secondary text */
  --w-ink-faint:       rgba(47, 47, 47, 0.45);        /* tertiary text / hints */
  --w-divider:         rgba(47, 47, 47, 0.06);        /* hairline rules */
  --w-border:          rgba(180, 160, 130, 0.15);     /* warm hairline */

  --w-accent:          #d9514b;                       /* coral — the Wicko red */
  --w-accent-hover:    #c4443f;
  --w-accent-soft:     rgba(217, 81, 75, 0.30);       /* glow / shadow tint */
  --w-on-accent:       #fdf6ec;                       /* text on coral */

  --w-shadow:          rgba(100, 80, 50, 0.10);       /* warm brown shadow */
  --w-shadow-strong:   rgba(100, 80, 50, 0.15);
  --w-shadow-card:     rgba(30, 27, 23, 0.18);        /* deeper card shadow */

  /* ─── SHAPE ─── */
  --w-radius-pill:     50px;
  --w-radius-card:     16px;
  --w-radius-button:   100px;
  --w-radius-input:    12px;

  /* ─── TYPE ─── */
  --w-font-display:    'cheap-pine-sans', 'Playfair Display', Georgia, serif;
  --w-font-body:       'DM Sans', system-ui, -apple-system, sans-serif;

  /* ─── MOTION ─── */
  --w-ease:            cubic-bezier(.16, 1, .3, 1);   /* the Wicko ease */
  --w-dur-fast:        .25s;
  --w-dur:             .35s;
  --w-dur-slow:        .5s;

  /* ─── SPACING (use sparingly — tokens not utilities) ─── */
  --w-pad-card:        20px;
  --w-pad-button:      14px 32px;
}

/* Microbrand — "Powered by Wicko Waypoint" footer chip */
.w-microbrand {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--w-font-body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--w-ink-faint);
  text-decoration: none;
  transition: color var(--w-dur) var(--w-ease);
}
.w-microbrand:hover { color: var(--w-accent); }
.w-microbrand::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--w-accent);
  flex-shrink: 0;
}