/*
 * Mitlesen design tokens — the single source of truth for the website.
 *
 * Every value here is derived from the app's own palette and reader so that
 * mitlesen.com and the app read as one product:
 *   surfaces + accent  -> mitlesen-mobile .../ui/theme/Color.kt (Light*)
 *   ink tones + articles -> .../ui/screens/reader/v2/ReaderV2Palette.kt
 *
 * Rules this file encodes (see the redesign brief):
 *   - No gradients, no glow shadows, no glass. One soft shadow, hairlines first.
 *   - Coral is an ACCENT, never body text: #FF7A6E on paper is 2.2:1.
 *     Use --ink for text and --coral-ink where a coral-coloured word is needed.
 *   - Dark mode is out of scope, but every value lives on :root so a later
 *     `@media (prefers-color-scheme: dark)` block can flip them in one place.
 *
 * Contrast measured against --paper (#F5EFE8):
 *   --ink 13.1:1 · --ink-2 4.9:1 · --coral-ink 4.7:1 · --article-der 5.0:1
 *   --article-die 5.0:1 · --article-das 5.1:1 · --ink-3 2.0:1 (never text)
 */

:root {
  /* ---- Surfaces -------------------------------------------------------- */
  --paper: #F5EFE8;          /* page background */
  --paper-raised: #FAF6F2;   /* cards, sticky bars, dialogs */
  --paper-sunken: #F0E7DE;   /* image placeholders, unselected chips */
  --rule: #D8CEC5;           /* hairline borders and dividers */
  --rule-strong: #C4B7AA;    /* a rule that has to carry structure */

  /* ---- Ink ------------------------------------------------------------- */
  --ink: #2B2623;            /* headings and body text */
  --ink-2: #6F675C;          /* secondary text, meta rows */
  --ink-3: #B3AA9C;          /* decorative only — fails AA as text */

  /* ---- Accent ---------------------------------------------------------- */
  --coral: #FF7A6E;          /* fills, underlines, markers */
  --coral-pressed: #E8685C;  /* pressed / active fills */
  --coral-soft: #F9DEDA;     /* sentence wash, soft chips */
  --coral-ink: #B8452F;      /* the only coral that may be text */
  --on-coral: var(--ink);    /* label on a coral fill — white fails AA */

  /* ---- Signature: German articles -------------------------------------- */
  /* Only where a noun is shown with its article (hero gloss, word popover).
     der/die are the app's values verbatim. das is darkened from the app's
     #2E7D46, which measures 4.45:1 on paper and misses AA for body text;
     #2A7340 is 5.07:1 and indistinguishable at reading size. */
  --article-der: #2F66B3;
  --article-die: #C02A52;
  --article-das: #2A7340;

  /* ---- State ----------------------------------------------------------- */
  --focus-ring: #2F66B3;
  --selection-bg: var(--coral-soft);
  --scrim: rgba(43, 38, 35, 0.5); /* --ink at 50% — wash over cover art */

  /* ---- Type families --------------------------------------------------- */
  --font-reading: Literata, Georgia, "Times New Roman", serif;
  --font-display: "Playfair Display", Georgia, serif;
  --font-ui: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui,
    -apple-system, "Segoe UI", sans-serif;

  /* ---- Type scale ------------------------------------------------------ */
  --size-meta: 0.8125rem;    /* 13px — datelines, captions, badges */
  --size-ui: 0.9375rem;      /* 15px — nav, buttons, chips */
  --size-base: 1rem;         /* 16px — UI prose */
  --size-body: clamp(1.1875rem, 1.125rem + 0.25vw, 1.3125rem); /* 19–21px */
  --size-lead: clamp(1.25rem, 1.15rem + 0.45vw, 1.5rem);
  --size-title-s: 1.25rem;
  --size-title-m: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem);
  --size-title-l: clamp(1.75rem, 1.35rem + 1.7vw, 2.5rem);
  --size-title-xl: clamp(2.125rem, 1.4rem + 3vw, 3.25rem);

  --leading-tight: 1.1;      /* display titles */
  --leading-snug: 1.3;       /* card titles, short headings */
  --leading-ui: 1.45;        /* labels, meta */
  --leading-body: 1.6;       /* reading text */

  --tracking-tight: -0.02em;
  --tracking-loose: 0.01em;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* ---- Measure and page width ------------------------------------------ */
  --measure: 38rem;          /* the reading column, as in the app's reader */
  --page-max: 72rem;         /* outer chrome */
  --gutter: clamp(1rem, 0.6rem + 1.6vw, 2.5rem); /* never below 16px */

  /* ---- Space ----------------------------------------------------------- */
  --space-1: 0.25rem;  /*  4px */
  --space-2: 0.5rem;   /*  8px */
  --space-3: 1rem;     /* 16px */
  --space-4: 1.5rem;   /* 24px */
  --space-5: 2.5rem;   /* 40px */
  --space-6: 4rem;     /* 64px */

  /* ---- Shape ----------------------------------------------------------- */
  --radius-card: 12px;
  --radius-pill: 999px;
  --hairline: 1px solid var(--rule);
  --shadow-soft: 0 6px 24px rgba(40, 30, 20, 0.06);

  /* ---- Motion ---------------------------------------------------------- */
  /* Hover and focus only. Nothing on the page moves by itself. */
  --duration: 120ms;
  --ease: cubic-bezier(0.2, 0.6, 0.3, 1);

  /* ---- Layers ---------------------------------------------------------- */
  --z-modal: 100;

  /* ---- Minimum tap target ---------------------------------------------- */
  --tap: 44px;
}