/* ==========================================================================
   RMarin · Tokens
   Colors, typography, spacing, motion and layout variables shared by all
   pages. Mobile first; breakpoints used across the site:

     480px   large phone
     600px   phablet / small tablet in portrait
     768px   tablet
     1024px  desktop: composition from the reference (1920px)
     1440px  large desktop

   From 1024px on, measurements come from the reference at 1920px:
   --u equals 1px at 1920px and scales proportionally, so the composition
   keeps its proportions.
   ========================================================================== */

:root {
  --color-white: #ffffff;
  --color-purple: #594593;
  --color-black: #030303;
  --color-orange: #ec5730;

  --color-orange-strong: #cf4520; /* white text on orange ≥ 4.5:1 */
  --color-hero-bg: #efefef;
  --color-surface: #f7f7f7;
  --color-dark: #2e2829;
  --color-panel: rgba(255, 255, 255, 0.4);
  --color-text: #3a3a3a;
  --color-muted: #616161;
  --color-heading-gray: #5a5a5a;
  --color-line: #8c8c8c;

  /* Typography */
  --font-display: "Integral CF", "Arial Black", "Helvetica Neue", sans-serif;
  --font-body: "Manrope", "Helvetica Neue", Arial, sans-serif;
  --font-button: "Fuji", "Arial Narrow", "Helvetica Neue", sans-serif;

  /* Scale unit: 1px at 1920px */
  --u: min(1px, calc(100vw / 1920));

  /* Layout */
  --container-max: 1920px;
  --gutter: 20px;
  --radius-pill: 999px;
  --radius-field: 16px;
  --radius-panel: 28px;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --duration: 0.35s;

  /* Vertical space at the top of each section. Only blog and contact
     (own background) and process (before the blog) use it at the bottom too.
     Compact on mobile to shorten the scroll. */
  --section-space: 28px;

  /* Header */
  --header-h: 64px;
  --header-h-compact: 56px;
}

@media (min-width: 480px) {
  :root {
    --gutter: 24px;
  }
}

@media (min-width: 600px) {
  :root {
    --section-space: 36px;
  }
}

@media (min-width: 768px) {
  :root {
    --gutter: 32px;
    --section-space: 48px;
    --header-h: 72px;
    --header-h-compact: 60px;
  }
}

@media (min-width: 1024px) {
  :root {
    --gutter: calc(160 * var(--u));
    --section-space: max(48px, calc(80 * var(--u)));
    --radius-field: calc(25 * var(--u));
    --radius-panel: calc(50 * var(--u));
    --header-h: calc(140 * var(--u));
    --header-h-compact: max(64px, calc(96 * var(--u)));
  }
}