/* Wrapped in @layer legacy on 05.10 (Astro port): pre-port CSS, frozen. New code is Tailwind and always wins. */
@layer legacy {
/* Blackfox brand tokens: near-black, silver, copper. Same values as the Mersalgsrådgiver pages (assets/mersalg.css),
 * written as OKLCH. Used by the front page; other Blackfox pages can move onto this file over time.
 * axes: dark / classical-serif (Instrument Serif, upright) / warm */
:root {
  --color-paper:      oklch(12.5% 0.004 60);   /* #080706 */
  --color-paper-2:    oklch(17% 0.006 70);     /* #12100D */
  --color-paper-3:    oklch(20.5% 0.009 70);   /* #191510 */
  --color-rule:       oklch(92.5% 0.008 75 / 0.12);
  --color-rule-strong: oklch(92.5% 0.008 75 / 0.22);
  --color-ink:        oklch(92.5% 0.008 75);   /* silver #E9E5DF */
  --color-muted:      oklch(66% 0.015 70);     /* pewter, lifted slightly for small text */
  --color-accent:     oklch(67% 0.10 65);      /* copper #C08A4E */
  --color-accent-deep: oklch(50% 0.08 62);     /* #8A5F30 */
  --color-accent-ink: oklch(17% 0.006 70);
  --color-focus:      oklch(74% 0.12 65);

  --font-display: var(--bxf-instrument), Georgia, "Times New Roman", serif;
  --font-body:    var(--bxf-dm-sans), ui-sans-serif, system-ui, sans-serif;

  --text-xs:   0.8125rem;
  --text-sm:   0.9rem;
  --text-base: 1.0625rem;
  --text-md:   1.25rem;
  --text-lg:   1.6rem;
  --text-xl:   2.1rem;
  --text-2xl:  2.75rem;
  --text-display: clamp(2.6rem, 6vw + 1rem, 4.6rem);

  --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: 4.5rem;
  --space-4xl: 7rem;

  --radius-pill: 999px;
  --rule-hair: 1px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in: cubic-bezier(0.5, 0, 0.75, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 160ms;
  --dur-med: 280ms;

  --gutter: 16px;
  --measure: 50ch;
  --max: 1040px;
}
@media (min-width: 720px) { :root { --gutter: 40px; } }
}
