/* adampang.com design system v2.0.0
 * Clean card-based minimal. Light-first, near-white surfaces, one blue primary, five accent hues that each own a section.
 *
 * Generated from src/design/tokens.json. Do not edit by hand.
 * Machine-readable twin: https://adampang.com/design/tokens.json
 */

:root {
  /* color . light */
    --color-bg: 250 250 250; /* #fafafa */
    --color-bg-mid: 240 244 255; /* #f0f4ff */
    --color-bg-end: 232 236 248; /* #e8ecf8 */
    --color-card: 255 255 255; /* #ffffff */
    --color-sunken: 241 245 249; /* #f1f5f9 */
    --color-line: 226 232 240; /* #e2e8f0 */
    --color-fg: 26 26 26; /* #1a1a1a */
    --color-muted: 91 102 116; /* #5b6674 */
    --color-faint: 98 107 120; /* #626b78 */
    --color-accent: 37 99 235; /* #2563eb */
    --color-accent-ink: 29 78 216; /* #1d4ed8 */
    --color-on-accent: 255 255 255; /* #ffffff */
    --color-sights: 245 158 11; /* #f59e0b */
    --color-sounds: 56 189 248; /* #38bdf8 */
    --color-curiosity: 52 211 153; /* #34d399 */
    --color-creativity: 192 132 252; /* #c084fc */
    --color-alert: 239 68 68; /* #ef4444 */
    --color-sights-ink: 147 95 7; /* #935f07 */
    --color-sounds-ink: 34 113 149; /* #227195 */
    --color-curiosity-ink: 30 120 87; /* #1e7857 */
    --color-creativity-ink: 127 87 166; /* #7f57a6 */
    --color-alert-ink: 200 30 30; /* #c81e1e */

  /* type family */
    --font-display: var(--font-display), system-ui, sans-serif;
    --font-body: var(--font-body), system-ui, sans-serif;
    --font-mono: var(--font-mono), ui-monospace, monospace;

  /* type scale */
    --text-caption: 0.75rem;
    --leading-caption: 1.4;
    --text-label: 0.8125rem;
    --leading-label: 1.4;
    --text-body: 1rem;
    --leading-body: 1.65;
    --text-lead: 1.125rem;
    --leading-lead: 1.6;
    --text-h3: 1.5rem;
    --leading-h3: 1.2;
    --text-h2: 1.875rem;
    --leading-h2: 1.15;
    --text-h1: 2.25rem;
    --leading-h1: 0.95;

  /* tracking */
    --tracking-tightest: -0.02em;
    --tracking-tighter: -0.01em;
    --tracking-label: 0.12em;
    --tracking-wide: 0.22em;

  /* space */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-14: 3.5rem;

  /* radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-full: 9999px;

  /* shadow */
    --shadow-card: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
    --shadow-card-md: 0 4px 6px rgba(0,0,0,.05), 0 2px 4px rgba(0,0,0,.03);
    --shadow-card-lg: 0 10px 25px rgba(0,0,0,.06), 0 4px 10px rgba(0,0,0,.04);

  /* motion */
    --motion-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --motion-duration-micro: 200ms;
    --motion-duration-state: 400ms;
    --motion-duration-reveal: 700ms;
    --motion-lift: -2px;
}

.dark {
  /* color . dark */
    --color-bg: 10 10 10; /* #0a0a0a */
    --color-bg-mid: 13 13 20; /* #0d0d14 */
    --color-bg-end: 10 15 26; /* #0a0f1a */
    --color-card: 20 20 20; /* #141414 */
    --color-sunken: 28 28 31; /* #1c1c1f */
    --color-line: 39 39 42; /* #27272a */
    --color-fg: 250 250 250; /* #fafafa */
    --color-muted: 161 161 170; /* #a1a1aa */
    --color-faint: 139 139 147; /* #8b8b93 */
    --color-accent: 96 165 250; /* #60a5fa */
    --color-accent-ink: 147 197 253; /* #93c5fd */
    --color-on-accent: 10 10 10; /* #0a0a0a */
    --color-sights: 251 191 36; /* #fbbf24 */
    --color-sounds: 125 211 252; /* #7dd3fc */
    --color-curiosity: 110 231 183; /* #6ee7b7 */
    --color-creativity: 216 180 254; /* #d8b4fe */
    --color-alert: 248 113 113; /* #f87171 */
    --color-sights-ink: 251 191 36; /* #fbbf24 */
    --color-sounds-ink: 125 211 252; /* #7dd3fc */
    --color-curiosity-ink: 110 231 183; /* #6ee7b7 */
    --color-creativity-ink: 216 180 254; /* #d8b4fe */
    --color-alert-ink: 252 165 165; /* #fca5a5 */
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-duration-micro: 0ms;
    --motion-duration-state: 0ms;
    --motion-duration-reveal: 0ms;
    --motion-lift: 0px;
  }
}