/* server/public/styles/tokens.css
 * Design tokens — single source of truth for all design values.
 * Color palette sourced from Pinky/Theme/PinkyTheme.swift (brand = navy, not pink).
 */

:root {
  /* ── Color ── */
  --paper:          #F6F6F6;
  --paper-pure:     #FFFFFF;
  --ink:            #111111;
  --ink-muted:      rgba(17, 17, 17, 0.48);
  --ink-faint:      rgba(17, 17, 17, 0.12);
  --brand:          #0E122E;
  --brand-gradient: linear-gradient(105deg, #0E122E 4%, #13173B 67%, #273183 91%);

  /* On-dark variants */
  --paper-on-ink:       rgba(245, 244, 242, 1);
  --paper-muted-on-ink: rgba(245, 244, 242, 0.56);
  --paper-faint-on-ink: rgba(245, 244, 242, 0.12);

  /* ── Typography (Pretendard) ── */
  --font-body: 'Pretendard Variable', 'Pretendard', system-ui, -apple-system, sans-serif;

  --t-display-xl-size: clamp(72px, 12vw, 180px);
  --t-display-l-size:  clamp(56px, 8vw, 120px);
  --t-display-m-size:  clamp(40px, 6vw, 80px);
  --t-heading-l-size:  clamp(32px, 4vw, 56px);
  --t-heading-m-size:  clamp(24px, 2.5vw, 36px);
  --t-body-l-size:     20px;
  --t-body-m-size:     17px;
  --t-label-size:      13px;
  --t-annotation-size: 12px;

  /* ── Spacing ── */
  --w-text: 680px;
  --w-wide: 1040px;

  --s-3xs: 0.25rem;
  --s-2xs: 0.5rem;
  --s-xs:  0.75rem;
  --s-s:   1rem;
  --s-m:   1.5rem;
  --s-l:   2.5rem;
  --s-xl:  4rem;
  --s-2xl: 6rem;
  --s-3xl: 9rem;
  --s-4xl: 12.5rem;

  /* ── Motion ── */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring:   cubic-bezier(0.25, 1.5, 0.5, 1);

  --dur-instant: 120ms;
  --dur-quick:   200ms;
  --dur-flow:    640ms;
  --dur-epic:    1200ms;
}

/* Reduced motion: disable set-pieces, keep micro-interactions */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-flow: 1ms;
    --dur-epic: 1ms;
  }
}