/* ==========================================================================
   Design Tokens
   Global custom properties, font-face declarations, and spacing scale.
   Shared by all pages: homepage, tools hub, and SRD browser.
   ========================================================================== */

/* --- Fonts --- */

@font-face {
  font-family: "Grenze";
  src: url("../assets/fonts/grenze-400.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Ruda";
  src: url("../assets/fonts/ruda-400.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Ruda";
  src: url("../assets/fonts/ruda-700.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* --- Custom Properties --- */

:root {
  /* Typography */
  --font-heading: "Grenze", Georgia, "Times New Roman", serif;
  --font-sans: "Ruda", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Palette */
  --color-bg: #252e1c;
  --color-surface: #313b24;
  --color-surface-alt: #38432b;
  --color-olive: #43562f;
  --color-olive-dark: #364728;
  --color-olive-deep: #29351f;
  --color-olive-deep-dark: #1f2918;
  --color-text: #f4f0e6;
  --color-text-muted: #dad3bf;
  --color-accent: #e2c87e;
  --color-line: #647253;
  --color-focus: #e9cd8a;

  /* Elevation */
  --shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.35);
  --shadow-sm: 0 8px 18px rgba(0, 0, 0, 0.22);

  /* Radii */
  --radius-sm: 0.375rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;

  /* Spacing scale */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;

  /* Layout rhythm */
  --section-space-desktop: clamp(3.75rem, 7vw, 5.5rem);
  --section-space-tablet: clamp(3rem, 6vw, 4.25rem);
  --section-space-mobile: clamp(2.25rem, 8vw, 3rem);
  --flow-space: clamp(0.9rem, 1.8vw, 1.25rem);
  --grid-gap-lg: clamp(1.25rem, 2.6vw, 2.5rem);
  --grid-gap-md: clamp(1rem, 2vw, 1.5rem);

  /* Container widths */
  --container: 72rem;
  --container-wide: 84rem;
  --header-height: 4.5rem;
}