/* ============================================================
   HUDDLE — design tokens, comune tuturor paginilor.
   Componentele folosesc tokenii semantici, nu culorile brute.
   ============================================================ */

/* Fonturi găzduite local, tăiate la caracterele folosite (inclusiv ă â î ș ț).
   Bricolage Grotesque: titluri, text și accente — grotesk cu desen de mână,
   își schimbă forma cu mărimea (axa opsz). DM Mono: etichetele tehnice. */
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/bricolage.woff2") format("woff2");
}
@font-face {
  font-family: "DM Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/dmmono-400.woff2") format("woff2");
}
@font-face {
  font-family: "DM Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/dmmono-500.woff2") format("woff2");
}

:root {
  /* --- primitive: verdele Huddle --- */
  --green-950: #0f211a;
  --green-900: #142c24;
  --green-850: #1a3428;
  --green-800: #233d27;
  --green-700: #263d28;
  --green-600: #3c5d30;
  --green-500: #4e7f35;
  --green-400: #76c753;
  --lime-300: #a6ee79;
  --lime-100: #e5f0d9;
  --paper-50: #f5f6ef;
  --paper-100: #eef3e3;
  --sage-600: #4f6545;
  --sage-400: #8eaa81;

  /* --- semantic: suprafețe și text (fundal deschis) --- */
  --bg-page: var(--paper-50);
  --bg-inverse: var(--green-800);
  --text-primary: var(--green-700);
  --text-secondary: var(--sage-600);   /* 5.9:1 pe --paper-50 */
  --text-on-dark: #f0f7ea;
  --text-on-dark-muted: #b3c8b0;       /* 6.7:1 pe --green-800 */
  --accent: var(--lime-300);
  --accent-ink: var(--green-500);       /* accent lizibil pe deschis */
  --rule: color-mix(in srgb, var(--text-primary) 16%, transparent);
  --focus-ring: var(--green-500);

  /* --- tipografie --- */
  --font-sans: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "DM Mono", ui-monospace, "SF Mono", Menlo, monospace;
  /* accentul din titluri: același font, drept, doar în verde */
  --font-serif: var(--font-sans);
  --text-micro: .75rem;   /* 12px — minimul pentru text */
  --text-sm: .875rem;
  --text-body: 1rem;
  --text-lead: clamp(1.125rem, 1rem + .5vw, 1.5rem);

  /* --- layout --- */
  --gutter: clamp(1.25rem, 3.4vw, 3rem);
  --container: 80rem;
  --header-h: clamp(4.5rem, 7vw, 6.5rem);

  /* --- motion --- */
  --ease-out: cubic-bezier(.16, .84, .44, 1);
  --dur-ui: 240ms;
}