/* Hallmark · tokens · theme: Atelier
 * axes — paper band: light (L 96.5%) · display style: high-contrast-serif · accent hue: mulberry ~355° (chromatic-other)
 * Portable design system for: Eläinlääkäri Minna Kauppi-Kuusinen
 * Every colour and font in styles.css references a token from this file.
 */

:root {
  /* ---- Colour · OKLCH ------------------------------------------------ */
  /* Paper — warm plaster. Never pure white. */
  --color-paper:        oklch(96.5% 0.008 70);
  --color-paper-2:      oklch(94.0% 0.011 68);
  --color-paper-3:      oklch(90.5% 0.014 66);

  /* Ink — warm near-black. Never pure black. */
  --color-ink:          oklch(24% 0.016 60);
  --color-ink-2:        oklch(45% 0.013 60);
  --color-ink-3:        oklch(52% 0.011 60);

  /* Structure */
  --color-rule:         oklch(85% 0.012 65);
  --color-rule-strong:  oklch(74% 0.014 62);

  /* Accent — muted mulberry. Used on < 5 % of any viewport. */
  --color-accent:       oklch(46% 0.115 355);
  --color-accent-deep:  oklch(38% 0.105 355);
  --color-accent-soft:  oklch(92.5% 0.030 355);
  --color-focus:        oklch(46% 0.115 355);

  /* Inverted surface — used once, on the booking tile */
  --color-ink-surface:  oklch(28% 0.030 355);
  --color-on-ink:       oklch(96% 0.010 60);
  --color-on-ink-2:     oklch(80% 0.014 40);

  /* ---- Type ---------------------------------------------------------- */
  --font-display: "Bodoni Moda", ui-serif, Georgia, "Times New Roman", serif;
  --font-body:    "Source Serif 4", ui-serif, Georgia, "Times New Roman", serif;

  /* Major-third scale (1.25) from a 16 px body */
  --text-xs:        0.8rem;
  --text-sm:        0.9rem;
  --text-base:      1rem;
  --text-md:        1.25rem;
  --text-lg:        1.5625rem;
  --text-xl:        1.9531rem;
  --text-2xl:       2.4414rem;
  --text-3xl:       3.0518rem;
  --text-display:   clamp(2.5rem, 4.4vw + 1rem, 4.75rem);
  --text-display-s: clamp(2rem, 3vw + 1rem, 3.25rem);

  --leading-display: 1.06;
  --leading-tight:   1.2;
  --leading-body:    1.6;
  --track-display:  -0.02em;
  --track-label:     0.11em;

  /* ---- Space · 4 pt scale -------------------------------------------- */
  --space-3xs: 0.125rem;
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-4xl: 9rem;

  /* ---- Line / radius -------------------------------------------------- */
  --rule-hair:   1px;
  --rule-strong: 2px;
  --radius-none: 0;
  --radius-sm:   2px;
  --radius-md:   3px;

  /* ---- Motion --------------------------------------------------------- */
  --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-micro:   120ms;
  --dur-short:   220ms;
  --dur-long:    420ms;

  /* ---- Depth ---------------------------------------------------------- */
  --z-base:     1;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-modal:    400;
  --z-toast:    500;
  --z-tooltip:  600;

  /* ---- Layout --------------------------------------------------------- */
  --rail-width:  3.5rem;
  --page-gutter: clamp(1rem, 4vw, 2.5rem);
  --page-max:    82rem;
  --tile-gap:    clamp(0.75rem, 1.2vw, 1.25rem);
}