/* Strait Journal — Tokens
   All CSS variable names preserved verbatim from the Claude Design export.
   Never invent new color tokens. Never use #FFFFFF. */

@font-face {
  font-family: "Fraunces";
  src: url("../fonts/Fraunces-VariableFont_SOFT_WONK_opsz_wght.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/Fraunces-Italic-VariableFont_SOFT_WONK_opsz_wght.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap');

:root {
  --cream:     #EFE5D3;
  --off-black: #1A1A1A;
  --river:     #7A8892;
  --rust:      #C65A2E;
  --paper:     #F7F4EC;

  --bg:              var(--cream);
  --bg-alt:          var(--paper);
  --bg-inverse:      var(--off-black);

  --fg:              var(--off-black);
  --fg-muted:        rgba(26, 26, 26, 0.60);
  --fg-inverse:      var(--cream);
  --fg-inverse-muted:rgba(239, 229, 211, 0.60);

  --accent:          var(--river);
  --accent-rare:     var(--rust);

  --rule:            rgba(26, 26, 26, 0.22);
  --rule-muted:      rgba(26, 26, 26, 0.12);
  --rule-inverse:    rgba(239, 229, 211, 0.22);
  --rule-rare:       var(--rust);

  --font-display: "Fraunces", "Cormorant Garamond", "GT Sectra", "EB Garamond", Georgia, serif;
  --font-body:    "Inter", "Helvetica Neue", Arial, sans-serif;

  --fs-xs:   14px;
  --fs-sm:   16px;
  --fs-ui:   18px;
  --fs-body: 22px;
  --fs-lg:   28px;
  --fs-xl:   44px;
  --fs-2xl:  66px;
  --fs-3xl:  92px;

  --lh-tight:  1.05;
  --lh-snug:   1.15;
  --lh-normal: 1.35;
  --lh-body:   1.5;

  --tracking-wordmark: 0.10em;
  --tracking-rubric:   0.18em;
  --tracking-tight:    -0.01em;
  --tracking-normal:   0;

  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  60px;
  --space-9:  80px;
  --space-10: 120px;

  --rule-w-hair:   1px;
  --rule-w-accent: 2px;

  --ease-out:   cubic-bezier(0.2, 0, 0, 1);
  --dur-fast:   150ms;
  --dur-normal: 250ms;
}