/**
 * Design Tokens
 * 
 * All design values are defined as CSS custom properties to avoid hard-coding
 * throughout the stylesheet. This ensures consistency and makes future updates easier.
 */

/* Font Face Declarations */
@font-face {
  font-family: "Ruder Plakat Maxi LL";
  src: url("../assets/fonts/RuderPlakatMaxiLLTT-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "ABC Marist";
  src: url("../assets/fonts/ABCMarist-Medium.woff2") format("woff2"),
       url("../assets/fonts/ABCMarist-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Colors */
  --color-bg-page: #faf4f0;
  --color-gridline: #f5e9e0;
  --color-border: #1c110a;
  --color-text: #1c110a;
  --color-link: #628c8c; /* Muted teal-green for links (Figma) */
  --color-link-hover: #4f7373;

  /* Spacing - Human-scaled spacing scale */
  --spacing-xs: 0.5rem;   /* 8px */
  --spacing-sm: 1rem;     /* 16px */
  --spacing-md: 2rem;     /* 32px */
  --spacing-lg: 4rem;     /* 64px */
  --spacing-xl: 8rem;     /* 128px */

  /* Typography */
  --font-display: "Ruder Plakat Maxi LL", sans-serif;
  --font-body: "Gantari", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  
  /* Writing section typography (content block uses ABC Marist) */
  --font-article-list: "IBM Plex Mono", monospace;
  --font-article-mono: "IBM Plex Mono", monospace;
  --font-article-marist: "ABC Marist", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-article-body: "ABC Marist", Georgia, "Times New Roman", serif;
  
  /* Typography Sizes */
  --font-size-display: clamp(3rem, 8vw, 6rem); /* Responsive display size */
  --font-size-body: 14px;
  --line-height-body: normal; /* Auto per design */
  --line-height-display: 1.1;
  --font-weight-body: 400; /* Medium */
  --letter-spacing-body: 0;

  /* Layout */
  --border-width: 32px; /* Thick frame border */
  --content-max-width: 40rem; /* Maintains left-aligned column */
  --content-padding: 48px; /* Padding inside page frame */
  --gridline-spacing: 2rem; /* Spacing between decorative gridlines */

  /* Scrollbar (Figma: 4px wide, 8px radius, 8px from edge) */
  --scrollbar-width: 4px;
  --scrollbar-radius: 8px;
  --scrollbar-color: #f5e9e0;
  --scrollbar-margin: 8px;
}