references/tokens.css

@import "tailwindcss";

/* ────────────────────────────────────────────────────────────────────────
   Apple-style design tokens. Values lifted from apple.com.
   See ~/dotfiles/.claude/skills/apple-style-site for the full playbook.

   These tokens flow into Tailwind v4 utilities automatically - e.g.
   `bg-surface-light`, `text-ink-primary`, `tracking-display`.
   ──────────────────────────────────────────────────────────────────────── */

@theme {
  /* ── Color ────────────────────────────────────────────────────────────
     Apple uses exactly three backgrounds. Pick a fourth and it stops
     looking like Apple. */
  --color-surface-white:  #ffffff;
  --color-surface-light:  #f5f5f7;
  --color-surface-black:  #000000;

  /* Text - body text is #1d1d1f, never pure black. */
  --color-ink-primary:    #1d1d1f;
  --color-ink-secondary:  #6e6e73;
  --color-ink-tertiary:   #86868b;
  --color-ink-on-dark:    #f5f5f7;

  /* The two blues. Don't introduce a third. */
  --color-link:           #0066cc;
  --color-link-hover:     #0077ed;
  --color-link-on-dark:   #2997ff;
  --color-link-on-dark-hover: #4ba5ff;
  --color-button-fill:    #0071e3;
  --color-button-fill-hover: #0077ed;

  /* The only border on the homepage is the footer hairline. */
  --color-divider:        #d2d2d7;

  /* ── Type ─────────────────────────────────────────────────────────────
     Apple's stack, in priority order:
       1. -apple-system → SF Pro on macOS/iOS/Safari (free, automatic)
       2. BlinkMacSystemFont → SF Pro on Chrome/Edge on macOS
       3. "SF Pro Display"/"SF Pro Text" → explicit if installed
       4. var(--font-inter) → Inter, loaded by next/font; near-identical
          metrics to SF Pro for non-Apple devices
       5. "Helvetica Neue", "Helvetica", "Arial" → universal fallbacks
     This way Apple users get real SF Pro; everyone else gets Inter, which
     is open-source and designed to fill exactly this niche. */
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display",
    var(--font-inter), "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-text: -apple-system, BlinkMacSystemFont, "SF Pro Text",
    var(--font-inter), "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Type scale (clamped, responsive) */
  --text-nav:        12px;
  --text-eyebrow:    21px;
  --text-body:       17px;
  --text-body-lg:    21px;
  --text-h3:         clamp(28px, 3vw, 40px);
  --text-h2:         clamp(40px, 5vw, 56px);
  --text-h1:         clamp(48px, 7vw, 80px);
  --text-display:    clamp(56px, 9vw, 96px);

  /* Tight tracking is the single biggest visual giveaway. */
  --tracking-display: -0.022em;
  --tracking-h1:      -0.015em;
  --tracking-h2:      -0.010em;
  --tracking-h3:      -0.005em;

  /* ── Spacing ──────────────────────────────────────────────────────────
     Tiles use 88-120px top/bottom padding routinely. */
  --spacing-tile-y:  120px;

  /* ── Layout ───────────────────────────────────────────────────────────
     Content stays inside 980px. Some images break out full-bleed; text
     never does. */
  --container-content: 980px;
  --container-wide:    1024px;

  /* ── Radius ───────────────────────────────────────────────────────────
     The pill is the signature shape. */
  --radius-md:   12px;
  --radius-lg:   18px;
  --radius-pill: 980px;

  /* ── Motion ───────────────────────────────────────────────────────────
     The Apple ease. Default ease-in-out looks generic; this decelerates
     with a slight settle. */
  --ease-apple: cubic-bezier(0.28, 0.11, 0.32, 1);
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);

  /* Tailwind already gives us --transition-duration-*; nothing custom needed. */
}

/* Base resets. */
html {
  font-family: var(--font-display);
  color: var(--color-ink-primary);
  background: var(--color-surface-white);
  /* Body line-height matches apple.com (1.47); display headlines override. */
  line-height: 1.47;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* Apple turns on contextual alternates + standard ligatures everywhere. */
  font-feature-settings: "ss01", "cv11", "calt";
}

body {
  min-height: 100dvh;
}

/* Respect reduced-motion universally. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}