/* Design tokens of Аромаполка: one system for the whole app, including the portrait dossier.
   Warm ivory paper and resin ink, a cognac accent for action and the owner's data, sage as the quiet
   second tone, brick only for errors and deletion. Colours in OKLCH; neutrals are tinted toward amber. */
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('/assets/fonts/cormorant-cyrillic-600.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('/assets/fonts/cormorant-latin-600.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('/assets/fonts/cormorant-cyrillic-500.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('/assets/fonts/cormorant-latin-500.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('/assets/fonts/cormorant-cyrillic-500-italic.woff2') format('woff2');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('/assets/fonts/cormorant-latin-500-italic.woff2') format('woff2');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: Onest;
  src: url('/assets/fonts/Onest-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: Onest;
  src: url('/assets/fonts/Onest-SemiBold.ttf') format('truetype');
  font-weight: 500 800;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/assets/fonts/JetBrainsMono-Regular.ttf') format('truetype');
  font-display: swap;
}

:root {
  /* Surfaces */
  --ap-paper: oklch(0.967 0.011 80);
  --ap-surface: oklch(0.988 0.006 85);
  --ap-sunk: oklch(0.943 0.014 78);
  --ap-well: oklch(0.925 0.016 76);
  --ap-line: oklch(0.893 0.014 75);
  --ap-line-strong: oklch(0.82 0.018 70);
  /* Ink */
  --ap-ink: oklch(0.235 0.018 50);
  --ap-ink-soft: oklch(0.37 0.02 52);
  --ap-muted: oklch(0.525 0.02 62);
  --ap-faint: oklch(0.66 0.016 66);
  /* Accent: cognac — primary action, the owner's ratings, current navigation */
  --ap-accent: oklch(0.475 0.105 43);
  --ap-accent-hover: oklch(0.42 0.1 41);
  --ap-accent-soft: oklch(0.932 0.034 62);
  --ap-accent-line: oklch(0.84 0.06 55);
  --ap-accent-ink: oklch(0.985 0.008 80);
  /* Sage: calm secondary marks (progress, «tried», confirmations) */
  --ap-sage: oklch(0.56 0.05 135);
  --ap-sage-soft: oklch(0.935 0.022 130);
  /* Danger */
  --ap-danger: oklch(0.5 0.15 28);
  --ap-danger-soft: oklch(0.962 0.02 28);
  --ap-danger-line: oklch(0.85 0.06 28);
  /* Type */
  --ap-display: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
  --ap-body: Onest, system-ui, sans-serif;
  --ap-mono: 'JetBrains Mono', ui-monospace, monospace;
  --ap-text-xs: 11.5px;
  --ap-text-sm: 13px;
  --ap-text: 14.5px;
  --ap-text-lg: 16px;
  /* Space: 4pt scale */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;
  --space-2xl: 32px;
  --space-3xl: 48px;
  --space-4xl: 64px;
  /* Shape and depth */
  --ap-radius-lg: 18px;
  --ap-radius: 12px;
  --ap-radius-sm: 8px;
  --ap-pill: 999px;
  --ap-control: 40px;
  --ap-shadow-sm: 0 1px 2px oklch(0.3 0.03 50 / 0.06);
  --ap-shadow: 0 1px 2px oklch(0.3 0.03 50 / 0.05), 0 12px 32px -14px oklch(0.3 0.04 50 / 0.22);
  --ap-shadow-lg: 0 24px 64px -20px oklch(0.25 0.04 50 / 0.35);
  --ap-focus: 0 0 0 3px oklch(0.475 0.105 43 / 0.28);
  /* Layout */
  --ap-sidebar: 236px;
  --ap-content: 1180px;
  --ap-tabbar: 64px;
  --ap-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (max-width: 740px) {
  :root {
    --ap-control: 44px;
    --ap-text: 15px;
  }
}