/* ==========================================================================
   Solokha: design tokens
   Palette by Alina, renamed by role (old name in comment)
   ========================================================================== */

:root {
  /* Brand palette */
  --color-teal: #004b4b;          /* color-2: main brand colour */
  --color-teal-deep: #003a3a;     /* derived from color-2, darker sections */
  --color-petrol: #004658;        /* color-3 */
  --color-sage: #709f9a;          /* color-5 */
  --color-mist: #cbdbd9;          /* color-6 */
  --color-copper: #bf733a;        /* color-11: accent, use sparingly */
  --color-taupe: #aaa09a;         /* color-4 */
  --color-sand: #e9e5e2;          /* color-8 */
  --color-ivory: #f6f5f2;         /* color-7 */
  --color-white: #ffffff;         /* color-9 */
  --color-graphite: #494949;      /* color-1 */
  --color-plum: #403354;          /* color-10-1 */

  /* Roles */
  --bg-page: var(--color-ivory);
  --bg-soft: var(--color-sand);
  --bg-dark: var(--color-teal);
  --bg-darker: var(--color-teal-deep);
  --text-heading: var(--color-teal);
  --text-body: var(--color-graphite);
  --text-muted: rgba(73, 73, 73, 0.64);
  --text-on-dark: var(--color-ivory);
  --text-on-dark-muted: rgba(246, 245, 242, 0.62);
  --accent: var(--color-copper);
  --line: rgba(0, 75, 75, 0.14);
  --line-on-dark: rgba(246, 245, 242, 0.16);
  --overlay: rgba(0, 28, 30, 0.55);

  /* Typography */
  --font-display: "Anglecia Pro Display", "Times New Roman", serif;   /* accent */
  --font-body: "Avant Garde", "Century Gothic", "Helvetica Neue", Arial, sans-serif;   /* main */
  --font-label: var(--font-body);   /* small uppercase labels */

  --fs-display: clamp(3rem, 1.6rem + 6.4vw, 8.5rem);
  --fs-h1: clamp(2.6rem, 1.6rem + 4.6vw, 6.5rem);
  --fs-h2: clamp(2.2rem, 1.5rem + 3.2vw, 5rem);
  --fs-h3: clamp(1.6rem, 1.25rem + 1.6vw, 2.75rem);
  --fs-h4: clamp(1.3rem, 1.15rem + 0.7vw, 1.75rem);
  --fs-lead: clamp(1.05rem, 0.98rem + 0.35vw, 1.3rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-label: 0.72rem;

  /* Spacing */
  --gutter: 1rem;
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: clamp(2rem, 1.5rem + 2vw, 3.5rem);
  --space-xl: clamp(3rem, 2rem + 4vw, 6rem);
  --section-pad: clamp(5rem, 3.5rem + 7vw, 11rem);
  --container: 1440px;

  /* Shape and motion */
  --radius-sm: 0.375rem;
  --radius-md: 0.75rem;
  --radius-lg: 1.25rem;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --header-h: 4.25rem;
}

@media (min-width: 768px) {
  :root {
    --gutter: 2rem;
    --header-h: 5rem;
  }
}

@media (min-width: 1200px) {
  :root {
    --gutter: 3rem;
  }
}