/* Pianivu design tokens. Light theme = ivory page, dark theme = ebony page (docs/05).
   Felt red is the only accent and marks "the note to play now"; on the site it is
   used for that note in the figures, links on hover and focus rings, nothing else.
   docs/store/graphics/build_score.py carries the same colour values for the figures. */
@font-face { font-family: "Pianivu Serif"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/fonts/source-serif-4-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Pianivu Serif"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/fonts/source-serif-4-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Pianivu Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Pianivu Sans"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/fonts/inter-latin-600-normal.woff2") format("woff2"); }

:root {
  color-scheme: light dark;

  --color-paper: oklch(96.5% 0.018 85);
  --color-paper-2: oklch(93.5% 0.022 85);
  --color-ink: oklch(23% 0.014 60);
  --color-ink-2: oklch(42% 0.016 60);
  --color-line: oklch(86% 0.02 80);
  --color-line-strong: oklch(70% 0.02 75);
  --color-accent: oklch(50% 0.165 27);
  --color-key-white: oklch(98.5% 0.012 85);
  --color-key-black: oklch(23% 0.014 60);
  --color-on-key-black: oklch(96.5% 0.018 85);
  --color-on-key-white: oklch(23% 0.014 60);
  --color-on-key-white-2: oklch(42% 0.016 60);

  --font-display: "Pianivu Serif", "Iowan Old Style", Georgia, serif;
  --font-body: "Pianivu Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --text-sm: 0.875rem;
  --text-base: 1.0625rem;
  --text-lg: 1.1875rem;
  --text-xl: 1.5rem;
  --text-2xl: clamp(1.75rem, 1.2rem + 1.8vw, 2.375rem);
  --text-display: clamp(2.375rem, 1.5rem + 2.8vw, 3.5rem);

  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 72px;
  --space-4xl: 104px;

  --page-max: 1120px;
  --gutter: 20px;

  --radius-key: 0 0 6px 6px;
  --radius-key-sm: 0 0 4px 4px;
  --rule-hair: 1px;
  --rule-staff: 2px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
}

@media (min-width: 760px) {
  :root { --gutter: 40px; }
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-paper: oklch(19% 0.012 60);
    --color-paper-2: oklch(23% 0.014 60);
    --color-ink: oklch(93% 0.02 85);
    --color-ink-2: oklch(76% 0.02 80);
    --color-line: oklch(32% 0.014 60);
    --color-line-strong: oklch(46% 0.016 60);
    --color-accent: oklch(64% 0.16 27);
    --color-key-white: oklch(93% 0.02 85);
    --color-key-black: oklch(12% 0.01 60);
    --color-on-key-black: oklch(93% 0.02 85);
  }
}