/* ============================================================
   Gour-Med Design Tokens — synchronized with Claude Design 2026-05-13
   Re-skinnable via CSS Custom Properties.
   ============================================================ */

:root {
  /* — Brand colors ————————————————— */
  --color-primary:   #B8242D;
  --color-primary-ink: #FFFFFF;
  --color-gold:      #F2B632;
  --color-gold-soft: #F5C65A;
  --color-accent:    #F4EFE8;
  --color-ink:       #1A1A1A;
  --color-ink-soft:  #3D3A36;
  --color-muted:     #8A8A8A;
  --color-line:      #E6E1D8;
  /* Surface: white-dominant (revised 2026-05-15 per ramp.space adaptation).
   * Cream survives as --color-surface-warm for occasional accent panels
   * (sidebar promos, in-issue blocks). Hierarchy comes from hairlines, not
   * tone-on-tone surfaces. */
  --color-bg:           #FFFFFF;
  --color-surface:      #FFFFFF;
  --color-surface-warm: #FBF9F4;

  /* — Rubrik-Farben (erdig, editorial · Color-Punctuation) — */
  --rub-dine:        #7A1F26;   /* Burgund */
  --rub-medical:     #2E5247;   /* Tiefe Salbei */
  --rub-travel:      #1E3A5F;   /* Ocean Deep */
  --rub-lifestyle:   #B88B3A;   /* Warmes Ocker */
  --rub-event:       #1A1A1A;   /* Anthrazit */
  --rub-magazine:    #6E4A28;   /* Espresso */

  /* Dark surfaces (footer etc.) */
  --color-dark:       #121212;
  --color-dark-soft:  #1E1E1E;
  --color-dark-line:  rgba(255,255,255,0.10);
  --color-dark-fg:    #F4EFE8;
  --color-dark-muted: rgba(244,239,232,0.55);

  /* — Typography ————————————————— */
  --font-display: "EB Garamond", "Garamond", "Adobe Garamond Pro", Georgia, serif;
  --font-serif:   "EB Garamond", "Garamond", Georgia, serif;
  --font-body:    "Inter", "Söhne", "Neue Haas Grotesk", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-meta:    "Inter", -apple-system, sans-serif;

  /* Type scale — ratio 1.250, base 18 */
  --fs-xs:   12.8px;
  --fs-sm:   14.4px;
  --fs-base: 18px;
  --fs-md:   22.5px;
  --fs-lg:   28.13px;
  --fs-xl:   35.16px;
  --fs-2xl:  43.95px;
  --fs-3xl:  54.93px;
  --fs-4xl:  68.66px;
  --fs-5xl:  85.83px;

  /* Weights */
  --fw-display-light: 400;
  --fw-display:       500;
  --fw-display-bold:  600;
  --fw-body:          400;
  --fw-body-med:      500;
  --fw-body-bold:     600;

  /* Leading */
  --lh-display: 1.02;
  --lh-title:   1.12;
  --lh-body:    1.58;
  --lh-ui:      1.3;

  /* Tracking */
  --tr-display: -0.022em;
  --tr-eyebrow: 0.14em;
  --tr-body:    -0.005em;

  /* — Spacing — 8px base ————————————————— */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  96px;
  --sp-10: 128px;

  /* — Radii ————————————————— */
  --r-none: 0;
  --r-sm:   2px;
  --r-md:   4px;
  --r-pill: 999px;

  /* — Layout ————————————————— */
  --container-max: 1320px;
  --article-max:   680px;
  --grid-gutter:   32px;

  /* — Motion ————————————————— */
  --ease-out: cubic-bezier(.2, .7, .3, 1);
  --dur-fast: 160ms;
  --dur-base: 300ms;

  /* — Elevation ————————————————— */
  --shadow-sm: 0 1px 2px rgba(26, 26, 26, 0.04);
  --shadow-md: 0 6px 24px rgba(26, 26, 26, 0.08);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img { max-width: 100%; display: block; }
button { font: inherit; }