/* ============================================================
   Design tokens — single source of truth.
   Tailwind colors (see <script> config in each HTML) reference
   these custom properties, so colors stay defined in one place.
   ============================================================ */

:root {
  /* ---- Color ---- */
  --color-ink: #171717;        /* primary text / dark surfaces  */
  --color-paper: #ffffff;      /* page background                */
  --color-muted: #9a9a9a;      /* secondary / metadata text      */
  --color-faint: #c4c4c4;      /* de-emphasized statement text   */
  --color-line: #e7e7e7;       /* hairline borders               */
  --color-teal: #2ec4b6;       /* brand accent                   */

  /* dark-surface foreground variants */
  --color-on-dark: #f5f5f5;
  --color-on-dark-muted: #8c8c8c;
  --color-surface-2: #232327;  /* button on dark                 */
  --color-surface-2-hover: #34343a;

  /* ---- Typography ---- */
  --font-display: "Archivo", system-ui, sans-serif; /* uppercase headings */
  --font-body: "Inter", system-ui, sans-serif;       /* running text      */

  /* fluid type scale */
  --fs-meta: clamp(0.72rem, 0.9vw, 0.82rem);
  --fs-body: clamp(0.95rem, 1.1vw, 1.05rem);
  --fs-tag: 16px;                              /* card tags (Archivo 16) */
  --fs-40: clamp(1.55rem, 6vw, 2.5rem);        /* shared 40px display size */
  --fs-heading: var(--fs-40);
  --fs-statement: var(--fs-40);
  --fs-cta: var(--fs-40);
  --fs-display: clamp(1.85rem, 5.2vw, 4rem);   /* hero wordmark (reduced) */

  /* shared display line metrics */
  --lh-display: 1.08;
  --ls-display: -0.04em;

  /* tracking */
  --tracking-tight: -0.01em;
  --tracking-wide: 0.04em;
  --tracking-wider: 0.12em;

  /* ---- Layout ---- */
  --container: 1360px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --radius-card: 16px;
  --radius-pill: 999px;
  --radius-img: 12px;

  /* ---- Motion system (single source — mirrored in js/motion.js) ---- */
  /* Entrance/micro curve: expo-out. The "premium" feel. */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-emphasis: cubic-bezier(0.16, 1, 0.3, 1);

  --dur-micro: 0.3s;        /* hovers / micro-interactions (0.2–0.4) */
  --dur-enter: 0.8s;        /* default reveal                        */
  --dur-enter-long: 1.1s;   /* hero-scale / large wipes              */
  --stagger: 70ms;          /* between staggered children (50–80)    */

  --dur: var(--dur-micro);  /* back-compat alias for existing rules   */
}