/*
  CSS custom properties translated directly from the Figma "Nautilus - New" file
  (Colours, Variable collection, Text variable collections).
  Names and values are taken as-is from Figma — do not invent additional values here.
*/

:root {
  /* ---- Colours (Figma "Colours" collection — Light mode) ---- */
  --colour-brand-teal: #14849D;
  --colour-sky-teal: #00BAC1;
  --colour-orange: #F58634;
  --colour-cta-orange: #F57E25;
  --colour-deep-teal: #072E37;
  --colour-primary-teal: #14839C; /* Figma "Primary/Primary" — distinct from --colour-brand-teal, used for the footer's social icon circles */
  --colour-charcoal: #232527;
  --colour-ink: #1A1D1E;
  --colour-dark-grey: #404244;
  --colour-header-grey: #3A3C3F;
  --colour-body-grey: #6D6E71;
  --colour-mid-grey: #AAACB1;
  --colour-light-grey: #DCDDDF;

  --colour-white: #FFFFFF;
  --colour-white-70: rgba(255, 255, 255, 0.7);
  --colour-black: #000000;

  --colour-grey-100: #FEFEFE;
  --colour-grey-101: #F7F8F9;
  --colour-grey-200: #ECEDEF;
  --colour-grey-300: #DCDDDF;
  --colour-grey-400: #D2D2D3;
  --colour-grey-500: #AAACB1;
  --colour-grey-600: #8D8F93;
  --colour-grey-700: #64676B;
  --colour-grey-800: #404244;
  --colour-grey-900: #232527;

  /* ---- Spacing — "Number Scale/2's" (Figma "Variable collection") ---- */
  --space-3xs: 2px;
  --space-2xs: 4px;
  --space-xs: 6px;
  --space-s: 8px;
  --space-m: 12px;
  --space-l: 16px;
  --space-xl: 20px;
  --space-2xl: 24px;
  --space-3xl: 32px;
  --space-4xl: 40px;
  --space-5xl: 42px;
  --space-6xl: 64px;
  --space-full: 999px;

  /* ---- Section spacing — "Sections/Header and footer" ---- */
  --space-section-xxs: 64px;
  --space-section-xs: 80px;
  --space-section-s: 96px;
  --space-section-m: 128px;
  --space-section-l: 144px;
  --space-section-xl: 160px;
  --space-section-2xl: 196px;

  /* ---- Layout ---- */
  --page-margin: 173px;

  /* Shared responsive container values. Every top-level section on the site
     centres its content in the same 1280px measure; --page-container-outer
     is that measure PLUS both gutters, so a section can carry
     `max-width: var(--page-container-outer); padding-inline: var(--page-gutter);`
     and its CONTENT box still resolves to exactly 1280px on desktop (design
     unchanged) while gaining a proper side gutter at every width below it —
     no media query per component. Gutter values match the ones the Home
     page established (16px mobile / 24px from tablet up). */
  --page-gutter: 16px;
  --page-container: 1280px;
  --page-container-outer: calc(var(--page-container) + var(--page-gutter) * 2);

  /* ---- Fonts — "Text" collection ---- */
  --font-primary: 'Figtree', Arial, sans-serif;
  --font-secondary: 'Inter', sans-serif;

  /* Deeper, more saturated orange used as the hover mix target below —
     stands in for a flat "black" darken so the orange buttons' hover
     state reads as a richer orange, not a muddy/greyed one. */
  --colour-orange-strong: #C1560E;

  /* ---- Button hover gradients (css/motion.css) ----
     Derived from each button's OWN existing colour token via color-mix()
     rather than introducing new brand colours: every stop is a darkened
     shade of the button's resting fill, so hovering always reads as
     richer/deeper, never lighter. Three stops (deep → dark → deep) is
     what gives the gradient something to travel through when
     background-position animates across it on hover — a two-stop ramp
     slides without visibly moving.

     Mix target is never flat black: teal buttons mix toward the site's
     own --colour-deep-teal (still a teal, not a grey-black), and orange
     buttons mix toward --colour-orange-strong above (still an orange, not
     a brown-black) — so a darkened button always reads as a richer shade
     of its own colour. */
  --colour-brand-teal-dark: color-mix(in srgb, var(--colour-brand-teal) 86%, var(--colour-deep-teal));
  --colour-brand-teal-deep: color-mix(in srgb, var(--colour-brand-teal) 66%, var(--colour-deep-teal));
  --colour-cta-orange-dark: color-mix(in srgb, var(--colour-cta-orange) 88%, var(--colour-orange-strong));
  --colour-cta-orange-deep: color-mix(in srgb, var(--colour-cta-orange) 70%, var(--colour-orange-strong));
  --colour-orange-dark: color-mix(in srgb, var(--colour-orange) 88%, var(--colour-orange-strong));
  --colour-orange-deep: color-mix(in srgb, var(--colour-orange) 70%, var(--colour-orange-strong));

  --gradient-teal-hover: linear-gradient(100deg, var(--colour-brand-teal-deep) 0%, var(--colour-brand-teal-dark) 42%, var(--colour-brand-teal-deep) 100%);
  --gradient-orange-hover: linear-gradient(100deg, var(--colour-cta-orange-deep) 0%, var(--colour-cta-orange-dark) 42%, var(--colour-cta-orange-deep) 100%);
  --gradient-orange-alt-hover: linear-gradient(100deg, var(--colour-orange-deep) 0%, var(--colour-orange-dark) 42%, var(--colour-orange-deep) 100%);
}

/* Roomier gutters from tablet portrait up — the one place this steps, so
   every container that uses --page-gutter steps with it. */
@media (min-width: 768px) {
  :root {
    --page-gutter: 24px;
  }
}