/*
 * Design tokens from the "ZenApps - Design System" Penpot library (Theme: Zen, Mode: Light / Dark)
 * plus the website's own "web" set from the "ZenApps website" Penpot file.
 * Token names map 1:1: accent.default -> --accent-default, type.body-l -> --type-body-l-*.
 */

@font-face { font-family: "Nunito"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/nunito-regular.ttf") format("truetype"); }
@font-face { font-family: "Nunito"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/nunito-medium.ttf") format("truetype"); }
@font-face { font-family: "Nunito"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/nunito-semibold.ttf") format("truetype"); }
@font-face { font-family: "Nunito"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/nunito-bold.ttf") format("truetype"); }

:root {
  color-scheme: light dark;

  /* core */
  --font-family-display: "Nunito", ui-rounded, system-ui, sans-serif;
  --font-family-ui: "Nunito", ui-rounded, system-ui, sans-serif;

  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px; --space-5: 20px;
  --space-6: 24px; --space-7: 28px; --space-8: 32px; --space-10: 40px; --space-12: 48px;

  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 24px; --radius-full: 999px;
  --border-width-thin: 1px;
  --size-control: 48px;
  --size-icon: 24px;

  /* web */
  --size-web-content: 1200px;
  --size-web-prose: 720px;

  /* mode/light */
  --background-app: #F7F8F7;
  --background-surface: #FFFFFF;
  --background-surface-muted: #E6E9E7;
  --border-subtle: #E6E9E7;
  --border-strong: #ADB3AF;
  --text-primary: #353836;
  --text-secondary: #666C68;
  --text-tertiary: #878D89;
  --text-on-accent: #FFFFFF;
  --icon-default: #353836;
  --icon-muted: #666C68;
  --accent-default: #4F6F5F;
  --accent-pressed: #3E584B;
  --accent-soft: #DDE8E2;
  --accent-tonal: #C2D5CB;
  --accent-on-tonal: #3E584B;
  --brand-heart: #648876;
  --brand-petal-side: #9FBBAD;
  --brand-petal-outer: #C2D5CB;
  --store-badge-bg: #1B1C1A;
  --store-badge-text: #FFFFFF;
  --store-badge-border: #1B1C1A;
  --elevation-card: 0 1px 3px rgba(26, 28, 27, 0.06), 0 6px 18px rgba(26, 28, 27, 0.06);
}

@media (prefers-color-scheme: dark) {
  :root {
    /* mode/dark */
    --background-app: #1B1C1A;
    --background-surface: #242522;
    --background-surface-muted: #353836;
    --border-subtle: #353836;
    --border-strong: #4B504D;
    --text-primary: #E6E9E7;
    --text-secondary: #ADB3AF;
    --text-tertiary: #878D89;
    --text-on-accent: #1B1C1A;
    --icon-default: #E6E9E7;
    --icon-muted: #ADB3AF;
    --accent-default: #9FBBAD;
    --accent-pressed: #C2D5CB;
    --accent-soft: #2F3B35;
    --accent-tonal: #3E584B;
    --accent-on-tonal: #C2D5CB;
    --brand-heart: #EEF0EE;
    --brand-petal-side: #9FBBAD;
    --brand-petal-outer: #4F6F5F;
    --store-badge-bg: #000000;
    --store-badge-text: #FFFFFF;
    --store-badge-border: #666C68;
    --elevation-card: 0 1px 2px rgba(0, 0, 0, 0.35), 0 8px 20px rgba(0, 0, 0, 0.25);
  }
}