/* ============================================================
   Beel — Design Tokens
   Single source of truth. Authored against the Beel Design System.
   Four colors, strict roles · serif display (Georgia) · system-ui body.

   DSGVO note: NO Google-Fonts hotlink here. The brand is Georgia-first
   ("zero web fonts, instant load"). Georgia ships on macOS/iOS/Windows.
   On Android/Linux we currently fall back to the system serif. To get
   pixel-identical Gelasio there later, self-host the woff2 files in
   /assets/fonts/ and add an @font-face block — never hotlink Google.
   ============================================================ */

:root {
  /* ---- Brand core (the only four) ---- */
  --sand:      #F1EBDD;   /* default light surface */
  --midnight:  #0F1F33;   /* primary ink + dark surfaces */
  --pacific:   #1F8F8C;   /* the accent — points, never shouts */
  --rust:      #C9542B;   /* the reward — rare highlights only */
  --white:     #FFFFFF;   /* cards, alternating sections */

  /* ---- Surface support ---- */
  --paper:        #ECE8DE;
  --sand-card:    rgba(255,255,255,.68);
  --pacific-deep: #1A7B78;
  --midnight-2:   #16293F;
  --rust-deep:    #B0481F;

  /* ---- Tints used as text/fills on color ---- */
  --on-pacific:   #E6F5F2;
  --on-rust:      #FBEFE8;
  --rust-wash:    rgba(201,84,43,.10);
  --pacific-wash: rgba(31,143,140,.10);

  /* ---- Borders — always hairline (.5px) ---- */
  --border:           rgba(15,31,51,.12);
  --border-strong:    rgba(15,31,51,.22);
  --border-on-dark:   rgba(241,235,221,.13);
  --border-logo-dark: rgba(241,235,221,.15);

  /* ---- Text opacities ---- */
  --ink:               #0F1F33;
  --ink-muted:         rgba(15,31,51,.50);
  --ink-faint:         rgba(15,31,51,.34);
  --sand-text:         #F1EBDD;
  --sand-muted:        rgba(241,235,221,.48);
  --sand-muted-strong: rgba(241,235,221,.62);

  /* ---- Semantic aliases — author against these ---- */
  --text-primary:       var(--ink);
  --text-secondary:     var(--ink-muted);
  --text-tertiary:      var(--ink-faint);
  --text-on-dark:       var(--sand-text);
  --text-on-dark-muted: var(--sand-muted);
  --text-accent:        var(--pacific);

  --surface-page:        var(--sand);
  --surface-page-deep:   var(--paper);
  --surface-card:        var(--white);
  --surface-card-sand:   var(--sand-card);
  --surface-dark:        var(--midnight);
  --surface-dark-raised: var(--midnight-2);
  --surface-accent:      var(--pacific);
  --surface-reward:      var(--rust);

  --accent:          var(--pacific);
  --reward:          var(--rust);
  --hairline:        var(--border);
  --hairline-strong: var(--border-strong);
  --hairline-on-dark:var(--border-on-dark);
  --link:            var(--midnight);
  --link-accent:     var(--pacific);
  --focus-ring:      rgba(31,143,140,.45);

  /* ---- Type families ---- */
  --font-display: Georgia, 'Gelasio', 'Times New Roman', serif;
  --font-body:    system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ---- Weights ---- */
  --fw-light:   300;
  --fw-regular: 400;
  --fw-medium:  500;

  /* ---- Display scale (serif) ---- */
  --fs-display:    78px;
  --fs-title:      50px;
  --fs-subtitle:   36px;
  --fs-quote:      33px;
  --fs-card-title: 24px;
  --fs-lead:       19px;

  /* ---- Body scale (sans) — consolidated to ~3 readable tiers ---- */
  --fs-body-lg: 17px;
  --fs-body:    16px;
  --fs-body-sm: 15px;
  --fs-caption: 14px;
  --fs-eyebrow: 13px;
  --fs-micro:   13px;

  /* ---- Line-heights ---- */
  --lh-display: 1.0;
  --lh-title:   1.06;
  --lh-snug:    1.3;
  --lh-body:    1.64;
  --lh-loose:   1.68;

  /* ---- Tracking ---- */
  --tk-display: -.03em;
  --tk-title:   -.025em;
  --tk-tight:   -.01em;
  --tk-normal:  0;
  --tk-eyebrow: .12em;
  --tk-mono:    .02em;

  /* ---- Spacing scale (4px base) ---- */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 20px;  --space-6: 24px;  --space-8: 32px;  --space-10:40px;
  --space-12:48px;  --space-14:56px;  --space-16:64px;  --space-22:88px;

  /* ---- Layout rhythm ---- */
  --container-max: 1100px;
  --container-pad: 40px;
  --section-y:     88px;
  --band-y:        46px;

  /* ---- Radii ---- */
  --r-sm: 6px;  --r-md: 10px;  --r-lg: 14px;  --r-card: 12px;
  --r-pill: 999px;  --r-tile: 22%;

  /* ---- Borders ---- */
  --bw-hair: .5px;

  /* ---- Elevation — soft ambient only ---- */
  --shadow-card: 0 1px 6px rgba(15,31,51,.07);
  --shadow-soft: 0 1px 6px rgba(15,31,51,.06);
  --shadow-pop:  0 8px 30px rgba(15,31,51,.12);
  --shadow-none: none;

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(.4, 0, .2, 1);
  --ease-out:      cubic-bezier(.16, 1, .3, 1);
  --dur-fast: 120ms;  --dur: 180ms;  --dur-slow: 280ms;

  /* ---- Interaction (no lift; opacity & border) ---- */
  --hover-opacity: .88;
  --press-opacity: .82;
}