/* Canonical semantic tokens. Preview exports are generated from this file.
   Every colour, spacing step and type size used by page CSS comes from here (docs/DESIGN-SYSTEM.md). */
:root {
  /* Colour */
  --ds-color-paper: #fff;
  --ds-color-ink: #171512;
  --ds-color-muted: #5b5750;
  --ds-color-line: #d6d2c9;
  --ds-heading-label-color: #8b651a;
  --ds-action-surface: #ffe078;
  --ds-action-hover: #f5cb4c;
  --ds-action-ink: #201b12;
  --ds-action-edge: #80601f;
  --ds-action-edge-hover: #624815;
  --ds-brass-wash: #f7efd9;
  /* Homepage brass carrier: the light and mid tones of the bell plates; the deep tone is the action edge. */
  --ds-brass-high: #fff5d6;
  --ds-brass-mid: #f0d68a;
  --ds-brass-hover: #f5e1aa;
  --ds-brass-active: #dcb95c;

  /* Spacing: 8-point scale. Section steps are the only values above 64px. */
  --ds-space-1: 8px;
  --ds-space-2: 16px;
  --ds-space-3: 24px;
  --ds-space-4: 32px;
  --ds-space-6: 48px;
  --ds-space-8: 64px;
  --ds-space-12: 96px;
  --ds-space-action-stack: var(--ds-space-3);
  --ds-space-section: clamp(64px, 7vw, 112px);
  --ds-space-section-mobile: 64px;
  /* Hero: space between the navigation and the first heading, and under the hero block. */
  --ds-space-hero: clamp(64px, 6vw, 88px);
  --ds-space-hero-end: var(--ds-space-section);

  /* Type */
  --ds-type-meta: 14px;
  --ds-type-body-small: 16px;
  --ds-type-action: 16px;
  --ds-type-body: 18px;
  --ds-type-lede: 22px;
  --ds-heading-label-size: 22px;
  --ds-heading-label-leading: 1.35;

  /* Interaction */
  --ds-touch-min: 44px;
  --ds-focus-width: 3px;
  --ds-focus-offset: 3px;

  /* Homepage panel: the framed panel grows with its content and always keeps this space under the last direct link. */
  --ds-home-panel-end: var(--ds-space-6);
  --ds-home-panel-end-mobile: var(--ds-space-4);
  /* Homepage motto H1 (Deniz, 15 Ekim 2026): desktop uses the homepage H1 size; mobile and compact are smaller so the motto fits. */
  --ds-home-motto-measure: 32ch;
  --ds-home-motto-tablet-size: clamp(44px, 5.2vw, 62px);
  --ds-home-motto-mobile-size: 28px;
  --ds-home-motto-mobile-leading: 1.12;
  --ds-home-motto-compact-size: 25px;
  --ds-home-motto-compact-leading: 1.14;

  /* Rules */
  --ds-rule-width: 1px;
  --ds-rule-color: rgba(21, 21, 21, .22);
  --ds-rule: var(--ds-rule-width) solid var(--ds-rule-color);
  /* Legacy alias: every neutral site divider inherits the same rule colour. */
  --line: var(--ds-rule-color);
}