/*
  Foundation tokens

  Theme switching rule:
  - keep a small set of core theme colors
  - switch theme by changing :root[data-theme="..."]

  Token groups:
  - color
  - font
  - text / leading
  - space
  - radius
  - motion
*/

:root,
:root[data-theme="lady-first-default"] {
  /* color: core theme colors */
  --theme-color-text-primary: #17211f;
  --theme-color-text-secondary: #66716d;
  --theme-color-text-inverse: #fbfaf6;
  --theme-color-link: #0a706f;
  --theme-color-link-hover: #b94e3f;
  --theme-color-link-visited: #6b5aa6;

  /* font */
  --theme-font-sans: "Hiragino Sans GB", "PingFang SC", sans-serif;
  --theme-font-mono: "SFMono-Regular", "Menlo", "Consolas", monospace;
  --theme-font-numeric: "SF Pro Display", "Helvetica Neue", sans-serif;

  /* text / leading */
  --theme-text-xs: 12px;
  --theme-text-sm: 13px;
  --theme-text-md: 14px;
  --theme-text-lg: 16px;
  --theme-text-xl: 18px;
  --theme-text-2xl: 22px;
  --theme-leading-tight: 1.2;
  --theme-leading-snug: 1.35;
  --theme-leading-normal: 1.5;
  --theme-leading-relaxed: 1.65;

  /* space */
  --theme-space-1: 4px;
  --theme-space-2: 8px;
  --theme-space-3: 12px;
  --theme-space-4: 16px;
  --theme-space-5: 20px;
  --theme-space-6: 24px;
  --theme-space-7: 32px;
  --theme-space-8: 40px;
  --theme-space-9: 48px;

  /* radius */
  --theme-radius-sm: 10px;
  --theme-radius-md: 12px;
  --theme-radius-lg: 14px;
  --theme-radius-xl: 18px;
  --theme-radius-2xl: 22px;
  --theme-radius-pill: 999px;

  /* motion */
  --theme-motion-fast: 160ms;
  --theme-motion-normal: 220ms;
  --theme-motion-slow: 320ms;
  --theme-motion-ease-standard: ease;
  --theme-motion-hover-lift: -1px;
}