/* Foundation tokens. Change these values to theme the entire site. */
:root {
  --color-purple-50: #f7f0fa;
  --color-purple-75: #fffafd;
  --color-purple-100: #e5d8f3;
  --color-purple-200: #e1d3e8;
  --color-purple-300: #d4bde1;
  --color-purple-400: #c4afe8;
  --color-purple-500: #9656b8;
  --color-purple-700: #633080;
  --color-purple-800: #57276f;
  --color-purple-950: #2c2130;
  --color-neutral-50: #fafafa;
  --color-neutral-400: #aaa;
  --color-white: #fff;
  --color-transparent: transparent;
  --color-overlay: #000c;
  --color-border-muted: #2c213033;
  --color-border-inverse: #f7f0fa66;
  --shadow-menu: 0 0.625rem 1.875rem #0003;

  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 1.75rem;
  --space-8: 2rem;
  --space-9: 2.25rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-14: 3.5rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-25: 6.25rem;
  --space-section: clamp(var(--space-14), 7vw, var(--space-25));
  --space-card: clamp(var(--space-6), 3vw, var(--space-10));
  --space-hero-copy: clamp(var(--space-5), 4vw, var(--space-16));
  --space-gutter: 4vw;
  --space-header-gutter: 2vw;

  --radius-small: 0.25rem;
  --radius-button: 0.4375rem;
  --radius-card: 0.75rem;
  --radius-round: 50%;
  --radius-pill: 999px;
  --border-width: 1px;
  --focus-width: 3px;
  --focus-offset: 5px;
  --opacity-disabled: 0.6;
  --opacity-muted: 0.7;
  --layer-header: 20;
  --layer-skip-link: 100;

  --font-body: 'Montserrat', sans-serif;
  --font-heading: 'Josefin Sans', sans-serif;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --font-size-small: 0.75rem;
  --font-size-eyebrow: 0.8125rem;
  --font-size-button: 0.875rem;
  --font-size-tag: 0.9375rem;
  --font-size-nav: 1rem;
  --font-size-body: 1.0625rem;
  --font-size-logo: 1.5rem;
  --font-size-h1: clamp(2.25rem, 4.6vw, 4.125rem);
  --font-size-hero-title: var(--font-size-h1);
  --font-size-h2: clamp(1.875rem, 3.4vw, 3rem);
  --font-size-h3: clamp(1.5rem, 2vw, 1.875rem);
  --font-size-project-title: clamp(1.625rem, 2.5vw, 2.25rem);
  --font-size-lead: clamp(1.125rem, 1.65vw, 1.5rem);
  --font-size-hero-tagline: var(--font-size-h3);
  --font-size-hero-description: var(--font-size-lead);
  --font-size-metric: 4rem;
  --font-size-quote: 4rem;
  --font-size-close: 1.875rem;
  --line-body: 1.65;
  --line-heading: 1.12;
  --line-title: 1.08;
  --line-compact: 1.2;
  --line-control: 1.4;
  --line-small: 1.5;
  --tracking-eyebrow: 0.08em;

  --size-content: 82.5rem;
  --size-reading: 48.75rem;
  --size-hero-content: 1960px;
  --space-hero-content-inset: max(0px, calc((100vw - var(--size-hero-content)) / 2));
  --size-hero-title: 42rem;
  --size-hero-description: 32rem;
  --size-hero-height: 85rem;
  --size-hero-copy: min(50vw, calc(var(--size-hero-content) / 2));
  --size-logo-width: 11.25rem;
  --size-logo-height: 5.625rem;
  --size-featured-logo-width: 15rem;
  --size-featured-logo-height: 7.5rem;
  --position-featured-logo: center center;
  --position-featured-logo-british-gas: center 40%;
  --size-brand-logo-width: 15rem;
  --size-portrait-media: 26rem;
  --size-tool-icon: 2.5rem;
  --size-menu-width: 11.25rem;
  --size-header-height: 5.375rem;
  --size-toggle-line: 1.75rem;
  --size-toggle-stroke: 2px;
  --size-touch-target: 2.75rem;
  --size-textarea-height: 6.25rem;
  --size-contact-image: 46rem;
  --size-dialog-width: 94vw;
  --size-dialog-height: 90vh;
  --position-hero-image: 80% top;
  --size-hero-portrait-height: clamp(24rem, 110vw, 36rem);

  /* Semantic base tokens connect primitives to their purpose. */
  --color-text: var(--color-purple-950);
  --color-surface: var(--color-purple-50);
  --color-paper: var(--color-purple-75);
  --color-link: var(--color-purple-700);
  --color-border: var(--color-purple-200);
  --color-focus: var(--color-purple-500);
  --color-inverse-text: var(--color-purple-75);
  --color-inverse-surface: var(--color-purple-950);

  /* Component tokens contain references only, never independent palette/space values. */
  --section-background: var(--color-surface);
  --section-text: var(--color-text);
  --section-padding-block: var(--space-section);
  --section-padding-inline: var(--space-gutter);
  --section-heading-gap: var(--space-8);
  --section-intro-gap: var(--space-10);
  --grid-gap: var(--space-8);
  --card-background: var(--color-paper);
  --card-border: var(--color-border);
  --card-radius: var(--radius-card);
  --card-padding: var(--space-card);
  --card-heading-gap: var(--space-5);
  --card-paragraph-gap: var(--space-5);
  --case-study-logo-width: var(--size-featured-logo-width);
  --case-study-logo-height: var(--size-featured-logo-height);
  --case-study-logo-position: var(--position-featured-logo);
  --header-background: var(--color-inverse-surface);
  --header-text: var(--color-surface);
  --header-height: var(--size-header-height);
  --header-padding-block: var(--space-4);
  --header-padding-inline: var(--space-header-gutter);
  --header-gap: var(--space-6);
  --nav-gap: var(--space-9);
  --nav-hover: var(--color-purple-400);
  --menu-background: var(--color-inverse-surface);
  --menu-padding-block: var(--space-4);
  --menu-padding-inline: var(--space-5);
  --menu-gap: var(--space-4);
  --menu-radius: var(--radius-small);
  --menu-shadow: var(--shadow-menu);
  --button-background: var(--color-inverse-surface);
  --button-text: var(--color-surface);
  --button-padding-block: var(--space-4);
  --button-padding-inline: var(--space-6);
  --button-radius: var(--radius-button);
  --button-header-background: var(--color-purple-400);
  --button-header-text: var(--color-text);
  --button-hover-background: var(--color-purple-700);
  --hero-frame-background: var(--color-inverse-surface);
  --hero-frame-padding: var(--space-header-gutter);
  --hero-content-inset: var(--space-hero-content-inset);
  --hero-copy-padding: var(--space-hero-copy);
  --hero-heading-gap: var(--space-16);
  --hero-tagline-gap: var(--space-24);
  --hero-description-gap: var(--space-8);
  --hero-text: var(--color-text);
  --hero-title-size: var(--font-size-hero-title);
  --hero-portrait-height: var(--size-hero-portrait-height);
  --hero-tagline-size: var(--font-size-hero-tagline);
  --hero-description-size: var(--font-size-hero-description);
  --proof-background: var(--color-purple-100);
  --proof-border: var(--color-border-muted);
  --proof-padding: var(--space-6);
  --offers-background: var(--color-purple-800);
  --offers-text: var(--color-inverse-text);
  --offers-border: var(--color-border-inverse);
  --offers-card-padding: var(--space-6);
  --offers-cta-gap: var(--space-6);
  --tag-border: var(--color-purple-300);
  --tag-gap: var(--space-3);
  --tag-padding-block: var(--space-3);
  --tag-padding-inline: var(--space-4);
  --tag-radius: var(--radius-pill);
  --testimonial-gap: var(--space-6);
  --testimonial-quote: var(--color-purple-700);
  --project-intro-background: var(--color-purple-100);
  --project-tools-gap: var(--space-10);
  --gallery-gap: var(--space-8);
  --gallery-margin: var(--space-10);
  --media-portrait-width: var(--size-portrait-media);
  --contact-gap: var(--space-16);
  --contact-image-radius: var(--radius-card);
  --form-field-gap: var(--space-6);
  --form-label-gap: var(--space-2);
  --form-name-gap: var(--space-3);
  --form-input-padding: var(--space-3);
  --form-input-background: var(--color-neutral-50);
  --form-input-border: var(--color-neutral-400);
  --form-input-text: var(--color-text);
  --form-status-gap: var(--space-3);
  --form-privacy-gap: var(--space-2);
  --lightbox-background: var(--color-inverse-surface);
  --lightbox-overlay: var(--color-overlay);
  --lightbox-close-background: var(--color-white);
  --lightbox-close-text: var(--color-text);
  --lightbox-close-inset: var(--space-3);
  --footer-background: var(--color-inverse-surface);
  --footer-text: var(--color-surface);
  --footer-padding: var(--space-12);
}

/* Keep the copy within the artwork's clear left side on smaller desktops. */
@media (width < 1800px) {
  :root {
    --font-size-hero-title: clamp(2.5rem, 4vw, 4rem);
    --size-hero-height: clamp(42.5rem, 56.28vw, 63.3125rem);
    --size-hero-title: 100%;
    --position-hero-image: 40% top;
    --hero-heading-gap: var(--space-8);
    --hero-tagline-gap: var(--space-10);
    --hero-description-gap: var(--space-6);
  }
}

/* Keep the overlay compact at tablet sizes. */
@media (width < 1100px) {
  :root {
    --hero-heading-gap: var(--space-6);
    --hero-tagline-gap: var(--space-6);
  }
}

/* Fluid hero typography continues scaling through tablet and phone widths. */
@media (width < 1000px) {
  :root {
    --font-size-hero-title: clamp(1.125rem, calc(0.625rem + 3vw), 2.5rem);
    --font-size-hero-tagline: clamp(0.875rem, calc(0.5625rem + 1.5vw), 1.5rem);
    --font-size-hero-description: clamp(0.875rem, calc(0.6875rem + 0.7vw), 1.125rem);
    --hero-heading-gap: var(--space-4);
    --hero-tagline-gap: var(--space-4);
    --hero-description-gap: var(--space-4);
  }
}

/* Focus the artwork on the portrait beneath full-width copy on smaller screens. */
@media (width <= 800px) {
  :root {
    --size-hero-height: var(--space-0);
    --size-hero-copy: 100%;
    --position-hero-image: right center;
    --font-size-hero-title: clamp(1.75rem, calc(1.25rem + 2.5vw), 2.5rem);
    --font-size-hero-tagline: clamp(1.125rem, calc(1rem + 0.5vw), 1.25rem);
    --font-size-hero-description: clamp(1rem, calc(0.9375rem + 0.125vw), 1.125rem);
  }
}

/* Responsive changes are made at the foundation; components inherit them. */
@media (max-width: 767px) {
  :root {
    --space-section: var(--space-12);
    --space-gutter: 6vw;
    --space-header-gutter: 6vw;
    --size-header-height: 4.75rem;
    --font-size-body: 1rem;
    --font-size-tag: 0.875rem;
    --font-size-h1: 2.1875rem;
    --font-size-metric: 3.5rem;
    --size-hero-title: 100%;
    --section-heading-gap: var(--space-6);
    --nav-gap: var(--space-5);
    --contact-gap: var(--space-8);
  }
}