@layer tokens, base, components, page, preferences;

@layer tokens {
  :root {
    color-scheme: light dark;
    --brand-gold: #e9b44c;
    --brand-ink: #29251f;
    --brand-cream: #faf8f2;
    --ui-background: #f5f5f7;
    --ui-surface: #ffffff;
    --ui-surface-raised: #ffffff;
    --ui-label: #1d1d1f;
    --ui-secondary-label: #59595f;
    --ui-tertiary-label: #6e6e73;
    --ui-accent: #805000;
    --ui-on-accent: #ffffff;
    --ui-separator: #d2d2d7;
    --ui-control-border: #86868b;
    --ui-control-hover: #ebebef;
    --ui-control-pressed: #dddde3;
    --ui-focus: #0066cc;
    --ui-material: rgb(255 255 255 / 88%);
    --ui-backdrop: rgb(0 0 0 / 48%);
    --ui-shadow: 0 8px 32px rgb(0 0 0 / 7%);
    --ui-modal-shadow: 0 24px 80px rgb(0 0 0 / 24%);
    --ui-artwork-background: #faf8f2;
    --ui-parking-background: var(--brand-cream);
    --font-system: system-ui, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
    --text-large-title: 2.125rem;
    --text-title-1: 1.75rem;
    --text-title-2: 1.375rem;
    --text-headline: 1.0625rem;
    --text-body: 1.0625rem;
    --text-callout: 1rem;
    --text-footnote: 0.8125rem;
    --text-caption: 0.75rem;
    --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-12: 3rem;
    --space-16: 4rem;
    --radius-control: 0.75rem;
    --radius-card: 1.5rem;
    --radius-sheet: 1.75rem;
    --radius-capsule: 999px;
    --target-min: 2.75rem;
    --duration-feedback: 140ms;
    --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --ui-background: #141416;
      --ui-surface: #1c1c1e;
      --ui-surface-raised: #2c2c2e;
      --ui-label: #f5f5f7;
      --ui-secondary-label: #b8b8be;
      --ui-tertiary-label: #a1a1a6;
      --ui-accent: #f3c463;
      --ui-on-accent: #1d1d1f;
      --ui-separator: #48484a;
      --ui-control-border: #8e8e93;
      --ui-control-hover: #363638;
      --ui-control-pressed: #48484c;
      --ui-focus: #7ebaff;
      --ui-material: rgb(44 44 46 / 90%);
      --ui-backdrop: rgb(0 0 0 / 70%);
      --ui-shadow: 0 8px 32px rgb(0 0 0 / 16%);
      --ui-modal-shadow: 0 24px 80px rgb(0 0 0 / 48%);
      --ui-parking-background: var(--ui-background);
    }
  }
}