/* House of Architects — design tokens (briefing §4). Concept: "De horizon". */

@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../assets/fonts/inter-tight-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../assets/fonts/inter-tight-greek-wght-normal.woff2") format("woff2");
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../assets/fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../assets/fonts/jetbrains-mono-greek-400-normal.woff2") format("woff2");
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }
/* contrastletter: Fira Sans 800, rechtop — dichtstbijzijnde vrije letter bij het woordmerk */
@font-face { font-family: "Fira Sans"; font-style: normal; font-weight: 800; font-display: swap;
  src: url("../assets/fonts/fira-sans-latin-800-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Fira Sans"; font-style: normal; font-weight: 800; font-display: swap;
  src: url("../assets/fonts/fira-sans-greek-800-normal.woff2") format("woff2");
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }

:root {
  /* basis */
  --ink: #141516;
  --ink-2: #2A2C2E;
  --kalk: #F3F1EC;
  --kalk-2: #E9E6DF;
  --steen: #8C8A84;      /* alleen grafisch of ≥ 18px; voor kleine secundaire tekst: --steen-text */
  --steen-text: #66645F; /* 5,4:1 op --kalk, 4,9:1 op --kalk-2 */
  --riet: #7E8273;
  --line: rgba(20, 21, 22, .14);
  --line-inv: rgba(243, 241, 236, .18);
  --pan: #B4532E;        /* dakpan: de enige kleur, ≤ 3% van het scherm */
  --pan-d: #A1482A;      /* dakpan donker: primaire knoppen, 5,3:1 met kalk */
  --polder: #3D4237;     /* uit de fotografie: polder/riet donker — vlakken (erkenning) */
  --riet-l: #DDDED3;     /* uit de fotografie: riet licht — vlakken (werkwijze, tekeningen) */
  --status-live: #B4532E;
  --status-done: #141516;

  /* sectiethema: elke sectie zet zijn eigen tekst/lijn/hover (geen transparant donker op licht) */
  --fg: var(--ink);
  --fg-2: #4A4A47;       /* secundaire tekst op licht, 8,3:1 */
  --fg-3: var(--steen-text);
  --bg: var(--kalk);
  --rule: var(--line);
  --rule-strong: rgba(20, 21, 22, .32);

  /* typografie */
  --font-sans: "Inter Tight", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-accent: "Fira Sans", "Inter Tight", ui-sans-serif, system-ui, sans-serif;
  --fs-hero: clamp(2.75rem, 1.2rem + 6.2vw, 7.5rem);
  --fs-h2: clamp(2rem, 1.1rem + 3.4vw, 4.25rem);
  --fs-h3: clamp(1.375rem, 1.1rem + 1vw, 2rem);
  --fs-index: clamp(2rem, 0.9rem + 4.4vw, 5.5rem);
  --fs-body: clamp(1.0625rem, 1rem + .25vw, 1.1875rem);
  --fs-lead: clamp(1.1875rem, 1.05rem + .5vw, 1.4375rem);
  --fs-meta: 0.8125rem; /* 13px, nooit kleiner */
  --lh-tight: 1.02;
  --lh-head: 1.1;
  --lh-body: 1.6;
  --track-head: -0.025em;
  --track-display: -0.035em;
  --track-mono: 0.06em;

  /* ruimte: 8px-grid */
  --s-1: 8px; --s-2: 16px; --s-3: 24px; --s-4: 32px; --s-5: 40px; --s-6: 48px; --s-8: 64px; --s-10: 80px; --s-12: 96px; --s-16: 128px;
  --section-y: clamp(80px, 9vw, 144px); /* was 96–192 (briefing); op verzoek van Niek compacter */
  --gutter: 24px;
  --margin: clamp(20px, 4vw, 64px);
  --maxw: 1600px;
  --measure: 62ch;

  /* vorm */
  --r-pill: 999px;
  --r-media: 6px;
  --shadow-hover: 0 2px 12px rgba(20, 21, 22, .06);

  /* motion */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-inout: cubic-bezier(.65, 0, .35, 1);
  --dur-ui: 240ms;
  --dur-reveal: 900ms;
  --dur-horizon: 1400ms;

  --nav-h: 80px;
}

@media (max-width: 767px) {
  :root { --gutter: 16px; --nav-h: 64px; }
}

/* donkere secties */
.t-dark {
  --fg: var(--kalk);
  --fg-2: rgba(243, 241, 236, .78);
  --fg-3: rgba(243, 241, 236, .64);
  --bg: var(--ink);
  --rule: var(--line-inv);
  --rule-strong: rgba(243, 241, 236, .4);
  color-scheme: dark;
}
.t-dark-2 { --bg: var(--ink-2); }
.t-kalk-2 { --bg: var(--kalk-2); --fg-3: #5E5C57; }
/* kleurvlakken (op verzoek van Niek): eigen, massieve lijn- en tekstkleuren per vlak */
.t-polder {
  --fg: var(--kalk); --fg-2: rgba(243, 241, 236, .82); --fg-3: rgba(243, 241, 236, .68);
  --bg: var(--polder); --rule: rgba(243, 241, 236, .2); --rule-strong: rgba(243, 241, 236, .45); color-scheme: dark;
}
.t-riet { --bg: var(--riet-l); --fg-2: #3E403A; --fg-3: #55584F; --rule: #C3C5B8; --rule-strong: #9A9D90; }