/**
 * Friends of Bulgaria - CSS Custom Properties
 * Design tokens taken from the approved concept: v5-flag_2.
 *
 * The `--fob-*` names are kept so existing component CSS keeps resolving,
 * but every value now comes from the design. Raw design aliases (--fob-ink,
 * --fob-red-deep, --fob-serif ...) are exposed for the section styles.
 */

:root {
  /* =========================================
     Colour Palette — from the concept
     ========================================= */

  /* Ink / neutrals (warm, not neutral grey) */
  --fob-ink: #262421;
  --fob-ink-soft: #5e5a55;
  --fob-white: #ffffff;
  --fob-grey-1: #f4f2ef;
  --fob-grey-2: #e6e3de;
  --fob-grey-3: #9c988f;

  /* Reds */
  --fob-red: #a8222e;
  --fob-red-2: #c23341;
  --fob-red-deep: #7c1620;
  --fob-red-soft: #f0cdd1;

  /* Greens — hero and pull-quote bands */
  --fob-green: #0a7d53;
  --fob-green-deep: #086845;
  --fob-green-quote: #0a7049;
  --fob-green-light: #4fa383;

  /* Rules */
  --fob-line: rgba(38, 36, 33, 0.12);
  --fob-line-light: rgba(255, 255, 255, 0.2);

  /* Legacy aliases — kept so older rules still resolve */
  --fob-grey: var(--fob-ink-soft);
  --fob-dark: var(--fob-ink);

  /* Semantic colour aliases */
  --fob-color-primary: var(--fob-red);
  --fob-color-text: var(--fob-ink-soft);
  --fob-color-background: var(--fob-white);
  --fob-color-heading: var(--fob-ink);

  /* =========================================
     Typography
     ========================================= */

  /* Font families — Fraunces for display, Hanken Grotesk for text */
  --fob-serif: "Fraunces", Georgia, "Times New Roman", serif;
  --fob-sans: "Hanken Grotesk", system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --fob-font-primary: var(--fob-sans);
  --fob-font-heading: var(--fob-serif);
  --fob-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier,
    monospace;

  /* Font sizes — concept runs a 17px body */
  --fob-font-size-small: 0.82rem;
  --fob-font-size-base: 17px;
  --fob-font-size-medium: 1.06rem;
  --fob-font-size-large: 1.28rem;
  --fob-font-size-xl: 1.5rem;
  --fob-font-size-h3: clamp(1.15rem, 1.9vw, 1.28rem);
  --fob-font-size-h2: clamp(1.8rem, 3.2vw, 2.5rem);
  --fob-font-size-h1: clamp(2.2rem, 4.6vw, 3.7rem);

  /* Font weights — headings sit at 500, not bold */
  --fob-font-weight-normal: 400;
  --fob-font-weight-medium: 500;
  --fob-font-weight-semibold: 600;
  --fob-font-weight-bold: 700;
  --fob-font-weight-heading: 500;

  /* Line heights */
  --fob-line-height-tight: 1.13;
  --fob-line-height-base: 1.7;
  --fob-line-height-loose: 1.8;

  /* Tracking */
  --fob-tracking-heading: -0.01em;
  --fob-tracking-eyebrow: 0.16em;

  /* =========================================
     Spacing Scale
     ========================================= */
  --fob-space-xs: 0.25rem;
  --fob-space-sm: 0.5rem;
  --fob-space-md: 1rem;
  --fob-space-lg: 1.5rem;
  --fob-space-xl: 2rem;
  --fob-space-xxl: 4rem;

  /* Layout rhythm from the concept */
  --fob-wrap-max: 1140px;
  --fob-wrap-pad: 28px;
  --fob-section-pad: 56px;
  --fob-header-height: 82px;

  /* Radii */
  --fob-radius-sm: 2px;
  --fob-radius-md: 4px;
  --fob-radius-lg: 8px;
  --fob-radius-xl: 10px;

  /* =========================================
     Breakpoints
     ========================================= */
  --fob-breakpoint-sm: 576px;
  --fob-breakpoint-md: 768px;
  --fob-breakpoint-lg: 992px;
  --fob-breakpoint-xl: 1200px;
}