/* Aspen Play foundations v0.2.
 * Standalone defaults match the existing Graphite product theme.
 * Existing --paper / --ink / --graphite-* variables override the defaults.
 * Design rule: component and canvas surfaces use solid fills, never color gradients.
 * Component styles must reference these semantic tokens, not raw colors.
 */
/* Geist and Geist Mono by Basement Studio for Vercel — SIL Open Font License 1.1 (../fonts/geist-OFL.txt).
 * Both are variable fonts (wght 100–900) served from this site; nothing is fetched from a CDN.
 * Geist has no italic and no oldstyle figures. Do not synthesize either.
 * 'Geist Fallback' below covers the swap. Product pages still use Space Grotesk through style.css.
 */
@font-face {
  font-family: 'Geist';
  src: url('../fonts/geist-sans.woff2') format('woff2');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: 'Geist Mono';
  src: url('../fonts/geist-mono.woff2') format('woff2');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
/* A metric-matched local face, so the swap to Geist does not move text.
 * Overrides were computed from the real files against Arial (average advance 0.4732em vs 0.4470em).
 * Where neither local font exists the face simply drops out.
 */
@font-face {
  font-family: 'Geist Fallback';
  src: local('Arial'), local('Helvetica Neue'), local('Helvetica');
  size-adjust: 105.85%;
  ascent-override: 94.94%;
  descent-override: 27.87%;
  line-gap-override: 0%;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --ap-font-sans: 'Geist', 'Geist Fallback', 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif;
  --ap-font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Consolas, 'PingFang SC', 'Microsoft YaHei', monospace;
  --ap-color-page: var(--paper, #181818);
  --ap-color-text: var(--ink, #ededed);
  --ap-color-muted: var(--mute, #ababab);
  --ap-color-soft: var(--soft, #878787);
  --ap-color-action: var(--accent, #d1d1d1);
  --ap-color-line: var(--line, #ffffff14);
  --ap-color-inset: #202020;
  --ap-color-control: #292929;
  --ap-color-on-action: #242424;
  --ap-color-error: #f0aaa4;
  --ap-surface-raised: #242424;
  --ap-surface-card: #252525;
  --ap-surface-action: #c3c3c3;
  --ap-shadow-raised: var(--graphite-lift, 0 3px 7px #0005, inset 0 1px 1px #ffffff08);
  --ap-shadow-inset: var(--graphite-press, inset 0 2px 6px #0008, inset 0 -1px 1px #ffffff06);
  --ap-color-stage: #111111; /* Open motion preview canvas. */
  --ap-shadow-overlay: 0 24px 80px #0008;
  --ap-space-1: 4px;
  --ap-space-2: 8px;
  --ap-space-3: 12px;
  --ap-space-4: 16px;
  --ap-space-6: 24px;
  --ap-space-8: 32px;
  --ap-space-12: 48px;
  --ap-radius-control: 9px;
  --ap-radius-input: 14px;
  --ap-surface-input: #2b2b2b;
  --ap-surface-input-focus: #303030;
  --ap-surface-input-error: #332929;
  --ap-radius-button-sm: 12px;
  --ap-radius-button: 14px;
  --ap-radius-button-lg: 18px;
  --ap-button-accent: #b8c4ff;
  --ap-button-accent-hover: #cdd5ff;
  --ap-button-on-accent: #232943;
  --ap-radius-button-square: 4px;
  --ap-radius-button-pill: 999px;
  --ap-button-width: 184px;
  --ap-button-morph-duration: 420ms;
  --ap-button-secondary-hover: #343434;
  --ap-button-primary-well: #b9b9b9;
  --ap-shadow-button: 0 2px 2px #0002, 0 5px 14px #0001;
  --ap-radius-card: 16px;
  --ap-radius-dialog: 22px;
  --ap-size-sm: 36px;
  --ap-size-md: 44px;
  --ap-size-lg: 52px;
  --ap-loader-sm: 20px;
  --ap-loader-md: 36px;
  --ap-loader-lg: 52px;
  --ap-loader-duration: 1200ms;
  --ap-loader-slow: 1800ms;
  --ap-loader-fast: 800ms;
  --ap-loader-reveal: 420ms;
  --ap-loader-line: 3px;
  --ap-loader-line-width: 120px;
  --ap-loader-enter: var(--ap-duration-enter);
  --ap-loader-exit: var(--ap-duration-feedback);
  --ap-loader-word-pass: 2000ms;
  --ap-loader-word-rest: 500ms;
  --ap-voice-sm: 24px;
  --ap-voice-md: 48px;
  --ap-voice-lg: 72px;
  --ap-voice-orb-sm: 48px;
  --ap-voice-orb-md: 72px;
  --ap-voice-orb-lg: 120px;
  --ap-voice-breath: 4800ms;
  --ap-voice-feedback: 1500ms;
  --ap-voice-feedback-error: 1500ms;
  --ap-voice-ink: var(--ap-color-text);
  --ap-voice-dim-ink: var(--ap-color-muted);
  --ap-voice-dim: var(--ap-color-soft);
  --ap-voice-tone-1: #3a3a3a;
  --ap-voice-tone-2: #6e6e6e;
  --ap-voice-tone-3: var(--ap-color-action);
  --ap-icon-sm: 16px;
  --ap-icon-md: 20px;
  --ap-icon-lg: 24px;
  --ap-icon-stroke: 1.45;
  --ap-type-display: 44px;
  --ap-type-heading: 28px;
  --ap-type-body: 16px;
  --ap-type-label: 12px;
  --ap-duration-press: 70ms;
  --ap-duration-feedback: 180ms;
  --ap-duration-enter: 240ms;
  --ap-ease-enter: cubic-bezier(.22, 1, .36, 1);
  --ap-ease-feedback: cubic-bezier(.2, .8, .2, 1);
}