/* Design tokens for the Journal concept. Change values here, not in components. */

/* Self-hosted fonts (SIL Open Font License): Fraunces for display, Inter for text. Latin subset. */
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 500 900; font-display: swap; src: url('fonts/fraunces-latin.woff2') format('woff2'); }
@font-face { font-family: 'Literata'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('fonts/literata-latin.woff2') format('woff2'); }
@font-face { font-family: 'Literata'; font-style: italic; font-weight: 400; font-display: swap; src: url('fonts/literata-italic-latin.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('fonts/inter-latin.woff2') format('woff2'); }

:root {
  /* Color: paper, ink, and accents. Roles are documented in style-guide.html. */
  --cream: #F5ECD9;
  --cream-deep: #EADCBF;
  --paper: #FBF6EA;
  --fringe: #FFFBF2;
  --sky: #67B7E5;
  --sky-deep: #4C9FD3;
  --ink: #171717;
  --ink-soft: #3B3832;
  --muted: #5A5448;
  --vermilion: #F04B2F;
  --vermilion-deep: #B02E18;
  --cobalt: #214EAD;
  --cobalt-deep: #183C88;
  --mustard: #EDB72D;
  --pink: #EE8FB1;
  --line: #D8CBB0;

  /* Type */
  --font-display: 'Fraunces', 'Georgia', 'Times New Roman', serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fs-display: clamp(2.5rem, 1.1rem + 4.4vw, 5.6rem);
  --fs-xl: clamp(2.5rem, 1.4rem + 4.6vw, 5.2rem);
  --fs-lg: clamp(2.1rem, 1.3rem + 3.2vw, 4rem);
  --fs-h2: clamp(1.9rem, 1.2rem + 2.6vw, 3.3rem);
  --fs-h3: clamp(1.3rem, 1.1rem + 0.8vw, 1.65rem);
  --fs-lead: clamp(1.15rem, 1.05rem + 0.4vw, 1.35rem);
  --fs-body: 1.125rem;
  --fs-small: 0.95rem;
  --lh-body: 1.65;
  --measure: 66ch;

  /* Space */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4.5rem;
  --s-9: 6.5rem;
  --gutter: clamp(1rem, 0.4rem + 3vw, 3rem);
  --wrap: 1240px;

  /* Edges, shadows, motion */
  --radius: 6px;
  --shadow-paper: 0 1px 1px rgba(23, 23, 23, .08), 0 12px 24px -10px rgba(12, 22, 44, .38), 0 3px 6px -2px rgba(12, 22, 44, .14);
  --shadow-lift: 0 1px 1px rgba(23, 23, 23, .08), 0 22px 36px -14px rgba(12, 22, 44, .42), 0 6px 10px -4px rgba(12, 22, 44, .16);
  --shadow-drop: drop-shadow(0 10px 14px rgba(12, 22, 44, .28)) drop-shadow(0 2px 3px rgba(12, 22, 44, .18));
  --shadow-print: 4px 4px 0 var(--ink);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --t-fast: 160ms;
  --t-med: 420ms;

  /* Textures */
  --grain: url('img/grain.webp');
  --paper-sky: url('img/paper-sky.webp');
  --paper-cream: url('img/paper-cream.webp');
  --paper-light: url('img/paper-light.webp');
  --paper-cobalt: url('img/paper-cobalt.webp');
  --paper-ink: url('img/paper-ink.webp');
}