@import "tailwindcss";
@import "./components.css";

/* —— Self-hosted fonts ——————————————————————————————— */

@font-face {
  font-family: "Source Serif 4";
  src: url("/assets/fonts/SourceSerif4Variable-Roman.woff2") format("woff2-variations");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("/assets/fonts/SourceSerif4Variable-Italic.woff2") format("woff2-variations");
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("/assets/fonts/IBMPlexSans-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("/assets/fonts/IBMPlexSans-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("/assets/fonts/IBMPlexSans-SemiBold.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("/assets/fonts/IBMPlexSans-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/assets/fonts/IBMPlexMono-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/assets/fonts/IBMPlexMono-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}

/* —— Design tokens ——————————————————————————————————— */

@theme {
  /* Color: ink (zinc, true neutral) */
  --color-ink:        #18181b;
  --color-ink-muted:  #52525b;
  --color-ink-soft:   #71717a;

  /* Color: surfaces */
  --color-paper:      #ffffff;
  --color-paper-soft: #fafafa;
  --color-rule:       #d4d4d8;
  --color-rule-soft:  #e4e4e7;

  /* Color: accent (single, restricted) */
  --color-link:       #1d4ed8;
  --color-link-hover: #1e40af;

  /* Color: status (badges only) */
  --color-ok:         #166534;
  --color-warn:       #92400e;
  --color-danger:     #991b1b;

  /* Status tints + rules (paired with the text colors above) */
  --color-ok-tint:        #f0fdf4;
  --color-ok-rule:        #bbf7d0;
  --color-warn-tint:      #fffbeb;
  --color-warn-rule:      #fde68a;
  --color-danger-tint:    #fef2f2;
  --color-danger-rule:    #fecaca;

  /* Type families */
  --font-serif: "Source Serif 4", Charter, Georgia, "Times New Roman", serif;
  --font-sans:  "IBM Plex Sans", ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif;
  --font-mono:  "IBM Plex Mono", ui-monospace, "SF Mono", "Cascadia Mono", monospace;

  /* Type scale */
  --text-xs:        0.75rem;
  --text-sm:        0.875rem;
  --text-base:      1rem;
  --text-lg:        1.125rem;
  --text-h3:        1.25rem;
  --text-h2:        1.5rem;
  --text-h1-narrow: 1.875rem;
  --text-h1:        2rem;

  /* Type rhythm */
  --leading-body:    1.6;
  --leading-tight:   1.2;
  --leading-stat:    1.4;
  --tracking-eyebrow: 0.08em;
  --tracking-tight:  -0.01em;

  /* Spacing — 4px scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-8: 3rem;
  --space-section:   var(--space-6);
  --space-paragraph: 0.875rem;

  /* Per-surface measure tokens */
  --measure-prose:           68ch;
  --measure-tier2a-hero:     980px;
  --measure-tier2a-body:     880px;
  --measure-tier2b-body:     760px;
  --measure-pillar-body:     720px;
  --measure-pillar-toc:      220px;
  --measure-fmc:             880px;
  --measure-home:            1044px;
  --measure-browse:          1044px;
  --measure-text-body:       720px;
  --measure-page-chrome:     1100px;
  --measure-chrome-inner:    1044px;

  /* Misc */
  --radius-sm: 2px;
  --radius-md: 4px;
  --rule-w: 1px;
  --rule-w-em: 3px;
  --transition-fast: 120ms ease-out;

  /* Breakpoints (used in @media queries within components.css) */
  --bp-xs: 480px;
  --bp-sm: 768px;
  --bp-md: 1024px;
  --bp-lg: 1280px;
}

/* —— Reduced motion ——————————————————————————————————— */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0ms !important;
    animation-duration: 0ms !important;
  }
}

/* —— Locale-specific typography ——————————————————————— */
:lang(de) { line-height: 1.7; }
:lang(de) h1, :lang(de) h2, :lang(de) h3 {
  word-break: break-word;
  hyphens: auto;
}