/* ==========================================================================
   Design tokens — palette restricted to black / beige / white / grays.
   Single light theme (no dark mode). The footer is a permanently dark
   block using the same raw palette, not a "mode".
   ========================================================================== */

:root {
  /* -- raw palette --------------------------------------------------- */
  --raw-black: #111111;
  --raw-gray-900: #211f1b;
  --raw-gray-800: #29261f;
  --raw-gray-600: #6e6a63;
  --raw-gray-300: #c9c3b8;
  --raw-beige: #e8e0d1;
  --raw-beige-light: #f5f0e6;
  --raw-white: #ffffff;

  /* -- type scale (mobile-first, fluid via clamp at wide breakpoints) - */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-md: 1.125rem;
  --text-lg: 1.375rem;
  --text-xl: clamp(1.75rem, 1.55rem + 1vw, 2rem);
  --text-2xl: clamp(2.25rem, 1.9rem + 1.75vw, 2.75rem);
  --text-3xl: clamp(2.75rem, 2.1rem + 3vw, 3.75rem);
  --text-4xl: clamp(3rem, 2.1rem + 4.5vw, 4.75rem);

  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-normal: 1.6;

  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.08em;

  /* -- spacing scale (8px base grid) ---------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;
  --space-11: 10rem;

  /* -- radii: unified across the whole site, no per-zone divergence ---- */
  --radius-soft: 20px;
  --radius-sharp: 4px;
  --radius-pill: 999px;

  /* -- motion ---------------------------------------------------------- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 150ms;
  --duration-base: 250ms;

  /* -- layout ------------------------------------------------------------ */
  --container-max: 122rem;
  --header-height: 5rem;

  /* -- semantic tokens --------------------------------------------------- */
  color-scheme: light;
  --bg-base: var(--raw-white);
  --bg-surface: var(--raw-white);
  --bg-surface-alt: var(--raw-beige-light);
  --bg-header: var(--raw-white);

  /* HybridLab territory: gray-300 tinted toward white, not a new hue */
  --bg-hybrid: color-mix(in srgb, var(--raw-gray-300) 32%, var(--raw-white));
  --bg-hybrid-alt: color-mix(in srgb, var(--raw-gray-300) 55%, var(--raw-white));

  --text-primary: var(--raw-black);
  --text-secondary: var(--raw-gray-600);

  --border-subtle: var(--raw-beige);
  --border-default: var(--raw-gray-600);

  --btn-bg: var(--raw-black);
  --btn-text: var(--raw-white);
  --btn-bg-hover: var(--raw-gray-900);

  --btn-outline-border: var(--raw-gray-600);
  --btn-outline-text: var(--raw-black);
  --btn-outline-bg-hover: var(--raw-beige-light);

  --focus-ring: var(--raw-black);

  /* -- footer: fixed dark block, independent of the (light-only) theme -- */
  --footer-bg: #222222;
  --footer-text: var(--raw-white);
  --footer-text-secondary: var(--raw-white);
  --footer-border: var(--raw-gray-800);
}