/* Dalahoo design tokens — see design-system/dalahoo/MASTER.md */
:root {
  --alclad: #E6E8E6;
  --alclad-2: #D6DAD9;
  --ink: #161A1E;
  --graphite: #48515A;
  --hangar: #171C21;
  --hangar-2: #232B32;
  --mist: #EDEFEE;
  --chrome: #A7B0B5;
  --brass: #D39B3D;
  --brass-deep: #7A5412;
  --sky: #8FB3C7;
  --error-light: #9E2A1E;
  --error-dark: #F29C8F;

  --font: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --wide: 125%;
  --track-display: -0.025em;

  --fs-xs: 0.875rem;
  --fs-s: 1rem;
  --fs-m: 1.125rem;
  --fs-l: 1.3125rem;
  --fs-xl: 1.75rem;
  --fs-2xl: 2.375rem;
  --fs-3xl: 3.25rem;
  --fs-h2: clamp(2.125rem, 4.6vw, 4.5rem);
  --fs-display: clamp(2.75rem, 8.6vw, 9.25rem);

  --gutter: max(16px, 5vw);
  --maxw: 1440px;
  --section: clamp(80px, 11vw, 176px);
  --gap: clamp(24px, 3vw, 48px);

  --ease: cubic-bezier(.2, .7, .1, 1);
  --t-fast: 160ms;
  --t-state: 280ms;
  --t-reveal: 700ms;

  --header-h: 72px;
  --z-sticky: 90;
  --z-header: 100;
  --z-menu: 200;
  --z-skip: 1000;
}

html[lang="fa"] {
  --font: 'Vazirmatn', system-ui, Tahoma, sans-serif;
  --wide: 100%;
  --track-display: 0;
}

/* Surfaces set the colour roles every component reads from. */
.surface-light,
body {
  --bg: var(--alclad);
  --bg-2: var(--alclad-2);
  --fg: var(--ink);
  --fg-2: var(--graphite);
  --rule: rgba(22, 26, 30, .18);
  --focus: var(--brass-deep);
  --link: var(--brass-deep);
  --error: var(--error-light);
  --input-bg: #F4F5F4;
}

.surface-dark {
  --bg: var(--hangar);
  --bg-2: var(--hangar-2);
  --fg: var(--mist);
  --fg-2: var(--chrome);
  --rule: rgba(237, 239, 238, .16);
  --focus: var(--brass);
  --link: var(--brass);
  --error: var(--error-dark);
  --input-bg: #1E252B;
}