/*
 * Wojtek Wiesławski — global design tokens.
 * This is the single source of truth for layout, headings, spacing and
 * buttons on the frontend and in the Gutenberg editor.
 */
:root,
.editor-styles-wrapper {
  --ww-red: #ef3b32;
  --ww-dark: #171717;
  --ww-white: #fff;

  /*
   * Global layout system.
   * 1280px is the usable desktop content width. Responsive gutters are
   * outside that width, so a full 1280px column is reached from 1360px up.
   */
  --ww-content-max: 1280px;
  --ww-text-max: 760px;
  --ww-text-wide: 920px;
  --ww-gutter: clamp(20px, 3.4vw, 40px);
  --ww-shell: calc(var(--ww-content-max) + (2 * var(--ww-gutter)));
  --ww-container: var(--ww-content-max); /* Backwards-compatible alias. */

  /* Global vertical rhythm and component dimensions. */
  --ww-page-hero-min: clamp(440px, 48svh, 520px);
  --ww-home-hero-min: clamp(680px, 78svh, 820px);
  --ww-page-content-y: clamp(44px, 4.5vw, 64px);
  --ww-section-y: clamp(44px, 4.5vw, 64px);
  /* The accepted Home keeps its original, more spacious rhythm. */
  --ww-home-section-y: clamp(84px, 9vw, 132px);
  --ww-panel-space: clamp(28px, 4vw, 64px);
  --ww-layout-gap: clamp(28px, 5vw, 80px);
  /* Minimum breathing room between a heading and its first text/list block. */
  --ww-heading-content-gap: clamp(22px, 2vw, 28px);
  /* One equal right/down offset for every photo frame, inherited from Home. */
  --ww-frame-offset: clamp(14px, 1.4vw, 20px);

  /* Header geometry is also global. */
  --ww-header: 88px;
  --ww-logo: 72px;
  --ww-logo-edge: 8px;

  /* H1–H5. */
  --ww-heading-h1: clamp(43px, 4.5vw, 58px);
  --ww-heading-h2: clamp(36px, 3.6vw, 52px);
  --ww-heading-h3: clamp(27px, 2.5vw, 36px);
  --ww-heading-h4: clamp(22px, 1.9vw, 28px);
  --ww-heading-h5: clamp(18px, 1.45vw, 22px);
  --ww-heading-weight: 650;
  --ww-heading-line-height: 1.08;
  --ww-heading-letter-spacing: -.035em;

  /* Shared editorial copy for every Gutenberg subpage. */
  --ww-body-size: clamp(16px, 1.25vw, 18px);
  --ww-body-line-height: 1.68;
  --ww-lead-size: clamp(19px, 1.8vw, 24px);
  --ww-lead-line-height: 1.58;

  /* Buttons: shared geometry. */
  --ww-button-height: 44px;
  --ww-button-padding: 20px;
  --ww-button-radius: 2px;
  --ww-button-font-size: 14px;
  --ww-button-font-weight: 730;
  --ww-button-gap: 12px;

  /* Button: light variant. */
  --ww-button-light-bg: #fff;
  --ww-button-light-text: #111;
  --ww-button-light-border: #fff;

  /* Button: dark variant. */
  --ww-button-dark-bg: #111;
  --ww-button-dark-text: #fff;
  --ww-button-dark-border: rgba(255, 255, 255, .46);

  /* Shared hover/focus colours; no movement is allowed. */
  --ww-button-hover-bg: var(--ww-red);
  --ww-button-hover-text: #fff;
  --ww-button-hover-border: var(--ww-red);
}

@media (max-width: 900px) {
  :root,
  .editor-styles-wrapper {
    --ww-page-hero-min: 460px;
    --ww-page-content-y: 44px;
    --ww-section-y: 44px;
    --ww-home-section-y: clamp(68px, 10vw, 92px);
    --ww-layout-gap: clamp(24px, 5vw, 48px);
  }
}

@media (max-width: 700px) {
  :root,
  .editor-styles-wrapper {
    --ww-gutter: 20px;
    --ww-page-hero-min: 440px;
    --ww-page-content-y: 36px;
    --ww-section-y: 36px;
    --ww-home-section-y: 64px;
    --ww-panel-space: 26px;
    --ww-button-height: 44px;
    --ww-button-padding: 18px;
    --ww-heading-h1: clamp(35px, 10vw, 43px);
    --ww-heading-h2: clamp(31px, 8vw, 40px);
    --ww-heading-h3: clamp(25px, 7vw, 31px);
    --ww-heading-h4: clamp(21px, 5.8vw, 26px);
    --ww-heading-h5: clamp(18px, 5vw, 21px);
  }
}