/* ==========================================================================
   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;
  --font-size-body: clamp(1rem, 0.24vw + 0.94rem, 1.08rem);
  --font-size-small: clamp(0.85rem, 0.12vw + 0.8rem, 0.92rem);
  --leading-heading: 1.14;
  --leading-body: 1.66;
  --tracking-heading: 0.012em;
  --tracking-eyebrow: 0.14em;

  /* Palette */
  --color-bg: #252e1c;
  --color-bg-elevated: #2a3420;
  --color-surface: #313b24;
  --color-surface-alt: #38432b;
  --color-panel: rgba(18, 25, 14, 0.36);
  --color-panel-strong: rgba(13, 19, 10, 0.5);
  --color-panel-highlight: rgba(226, 200, 126, 0.08);
  --color-olive: #43562f;
  --color-olive-dark: #364728;
  --color-olive-deep: #29351f;
  --color-olive-deep-dark: #1f2918;
  --color-text: #f4f0e6;
  --color-text-muted: #dfd8c6;
  --color-text-soft: #cfc8b3;
  --color-accent: #e2c87e;
  --color-accent-strong: #edd89f;
  --color-line: #647253;
  --color-line-subtle: rgba(247, 243, 234, 0.16);
  --color-focus: #e9cd8a;

  /* Elevation */
  --shadow-lg: 0 24px 52px rgba(0, 0, 0, 0.38);
  --shadow-md: 0 14px 30px rgba(0, 0, 0, 0.28);
  --shadow-sm: 0 8px 20px rgba(0, 0, 0, 0.22);

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

  /* 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(4.25rem, 7.6vw, 6.25rem);
  --section-space-tablet: clamp(3.2rem, 6.5vw, 4.6rem);
  --section-space-mobile: clamp(2.4rem, 8vw, 3.15rem);
  --flow-space: clamp(1rem, 1.9vw, 1.35rem);
  --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;
}