/* Hallmark · custom (brief-pinned) · vibe: "white sheet, classic BMW, catalogue calm"
 * paper oklch(100% 0 0) · accent oklch(49% 0.17 29) E30 vermilion, deepened for text contrast
 * display: Cormorant Garamond 500, capitals with spacing · body: IBM Plex Sans 500/600
 * axes: light / classical-serif / warm
 * Single source of colour, type and spacing for the Erbstück catalogue (studio example).
 */

/* Fallback faces tuned to the web fonts' width, so text does not jump when they arrive. */
@font-face {
  font-family: "Cormorant Fallback";
  src: local("Times New Roman"), local("TimesNewRomanPSMT");
  size-adjust: 94%;         /* measured against Times New Roman */
  ascent-override: 98%;
  descent-override: 30%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Plex Fallback";
  src: local("Arial"), local("ArialMT");
  size-adjust: 103%;        /* measured: Plex 500 runs 3% wider than Arial */
  ascent-override: 100%;
  descent-override: 27%;
  line-gap-override: 0%;
}

:root {
  /* colour */
  --color-paper: oklch(100% 0 0);
  --color-photo: oklch(95.5% 0 0);
  --color-ink: oklch(21% 0 0);
  --color-ink-2: oklch(45% 0 0);
  --color-ink-3: oklch(58% 0 0);
  --color-rule: oklch(87% 0 0);
  --color-rule-strong: oklch(70% 0 0);
  --color-accent: oklch(49% 0.17 29);
  --color-accent-deep: oklch(41% 0.15 29);
  --color-on-accent: oklch(100% 0 0);
  --color-accent-fill: oklch(49% 0.17 29);      /* buttons: white text on it */
  --color-accent-fill-deep: oklch(41% 0.15 29);
  --color-focus: oklch(49% 0.17 29);
  --color-row-hover: oklch(97.8% 0 0);
  --color-on-photo: oklch(97% 0.008 85);    /* text over the hero photo, both themes */
  --color-on-photo-2: oklch(90% 0.01 85);

  /* type */
  --font-display: "Cormorant Garamond", "Cormorant Fallback", "Times New Roman", serif;
  --font-body: "IBM Plex Sans", "Plex Fallback", Arial, sans-serif;

  --text-hero: 4rem;        /* 64 */
  --text-h1: 3rem;          /* 48 */
  --text-h2: 2.25rem;       /* 36 */
  --text-h3: 1.5rem;        /* 24 */
  --text-h4: 1.25rem;       /* 20 */
  --text-number: 1.875rem;  /* 30, part number on the part page */
  --text-lead: 1.1875rem;   /* 19 */
  --text-body: 1.0625rem;   /* 17 */
  --text-small: 0.9375rem;  /* 15 */
  --text-meta: 0.875rem;    /* 14 */
  --text-util: 0.8125rem;   /* 13, the service line in the header */

  --track-display: 0.07em;
  --track-display-s: 0.1em;
  --leading-display: 1.04;
  --leading-body: 1.62;

  /* space, 4 pt */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;
  --space-5xl: 8rem;
  --space-6xl: 10rem;

  /* layout */
  --page-max: 82.5rem;      /* 1320 */
  --page-margin: 3.75rem;   /* 60 */
  --gutter: 1.5rem;         /* 24 */
  --util-h: 2rem;           /* 32, service line */
  --head-h: 4.25rem;        /* 68, main header line */

  /* lines */
  --rule-hair: 1px;
  --rule-mark: 3rem;        /* the short divider under a heading, as in the owner's sketch */

  /* motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in: cubic-bezier(0.55, 0, 1, 0.45);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 150ms;
  --dur-page: 125ms;        /* out + in = 250 ms content crossfade */
  --dur-reveal: 500ms;

  --radius-control: 2px;
  color-scheme: light;
}

/* Night garage: same type and layout, warm near-black sheet, warm white text, one warm red. */
:root[data-theme="night"] {
  --color-paper: oklch(18.6% 0.004 106);      /* #141412 */
  --color-photo: oklch(24% 0.004 95);
  --color-ink: oklch(93% 0.012 85);           /* warm white */
  --color-ink-2: oklch(75% 0.012 85);
  --color-ink-3: oklch(62% 0.01 85);
  --color-rule: oklch(32% 0.006 85);          /* thin dark-grey dividers */
  --color-rule-strong: oklch(44% 0.006 85);
  --color-accent: oklch(66% 0.18 31);         /* text and links on the dark sheet */
  --color-accent-deep: oklch(74% 0.15 35);    /* hover gets lighter at night */
  --color-accent-fill: oklch(50% 0.17 29);
  --color-accent-fill-deep: oklch(56% 0.18 30);
  --color-on-accent: oklch(97% 0.01 85);
  --color-focus: oklch(70% 0.16 33);
  --color-row-hover: oklch(22% 0.005 95);
  color-scheme: dark;
}