/*
 * Central design variables for the Packshot Pro theme.
 * Every colour, size and spacing value used by the theme is defined here.
 * Change a value here and it changes everywhere.
 *
 * One exception: CSS cannot read variables inside media queries, so the
 * mobile breakpoint (767px) is written out in base.css and components.css.
 */

:root {
	/* ---------- Colour ---------- */

	/* Accent: placeholder red, final shade pending. Only for underlines, hover, focus outlines and small marks. */
	--color-accent: #7a1f2b;

	--color-ink: #141413;            /* text, primary button, rules on headings */
	--color-ink-muted: #5f5f59;      /* secondary text */
	--color-ink-subtle: #8d8d86;     /* dashed placeholders */
	--color-page: #f5f5f2;           /* page background */
	--color-overlay: #fbfbfa;        /* navigation overlay, slightly lighter than the page */
	--color-surface-alt: #ebebe7;    /* alternate band */
	--color-rule: #d8d8d3;           /* hairlines */
	--color-rule-strong: #bdbcb5;    /* form borders, sector link underline */
	--color-black: #0b0b0a;          /* sector tiles section on hover */
	--color-video: #1b1b19;          /* video area before it loads */
	--color-on-dark: #f5f5f2;        /* text on dark backgrounds */
	--color-on-dark-muted: #a5a49d;  /* secondary text on black */
	--color-on-dark-soft: #e6e5df;   /* body text on dark banners */
	--color-on-dark-caption: #d6d5cf;/* captions and eyebrows on dark */
	--color-on-image: #ffffff;       /* text on photographs */

	/* Image placeholders, used until real images are set */
	--placeholder-light: linear-gradient(160deg, #dcdbd6, #aeada6);
	--placeholder-dark: linear-gradient(120deg, #23221f, #5d5b55);
	--placeholder-tile: linear-gradient(165deg, #8d8c85, #3a3935);
	--placeholder-caption: #33332f;

	/* Darkening over photographs so text stays readable */
	--scrim-bottom: linear-gradient(180deg, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, .62) 100%);
	--scrim-card: linear-gradient(180deg, rgba(0, 0, 0, .5) 0, rgba(0, 0, 0, 0) 38%, rgba(0, 0, 0, 0) 62%, rgba(0, 0, 0, .6) 100%);
	--scrim-centre: rgba(0, 0, 0, .38);
	--scrim-popup: rgba(11, 11, 10, .55); /* behind the contact pop-up */

	/* ---------- Type ---------- */

	--font-family: 'Hanken Grotesk', 'Helvetica Neue', Arial, sans-serif;
	--weight-light: 300;
	--weight-regular: 400;
	--weight-medium: 500;

	/* Body */
	--body-size: 16px;
	--body-line: 1.7;
	--body-tracking: .01em;

	/* Lead (intro paragraphs) */
	--lead-size: 19px;
	--lead-line: 1.7;

	/* Small */
	--small-size: 15px;
	--small-line: 1.5;

	/* Display: fluid, capped at 64px */
	--display-size: clamp(40px, 4.6vw, 64px);
	--display-line: 1.04;
	--display-tracking: -.015em;

	/* Heading 2: fluid 30 to 52px */
	--h2-size: clamp(30px, 3.8vw, 52px);
	--h2-line: 1.1;
	--h2-tracking: -.01em;

	/* Heading 3 */
	--h3-size: 20px;
	--h3-line: 1.3;

	/* Card title: tile names, card titles, overlay title */
	--card-title-size: 24px;
	--card-title-line: 1.25;

	/* Navigation (also form field labels) */
	--nav-size: 12px;
	--nav-tracking: .14em;

	/* Label (eyebrows) */
	--label-size: 13px;
	--label-tracking: .24em;

	/* Buttons */
	--button-size: 12px;
	--button-tracking: .16em;
	--button-pad: 16px 28px 15px;

	/* Wordmark until the logo is decided */
	--wordmark-size: 15px;
	--wordmark-tracking: .32em;

	/* Image placeholder captions */
	--caption-size: 11px;
	--caption-tracking: .16em;

	/* ---------- Spacing ---------- */

	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 20px;
	--space-6: 24px;
	--space-7: 28px;
	--space-8: 32px;
	--space-9: 40px;
	--space-10: 48px;
	--space-11: 64px;
	--space-12: 80px;
	--space-13: 112px;
	--space-14: 128px;

	--page-max: 1440px;
	--gutter: clamp(20px, 4vw, 64px);       /* left and right page margin */
	--section-space: clamp(64px, 8vw, 120px);/* top and bottom of a section */
	--header-space: 28px;                   /* above and below the header */
	--tile-gap: 20px;
	--grid-gap: 12px;
	--hero-gap: 4px;

	/* ---------- Shapes and sizes ---------- */

	--radius-media: 16px;
	--radius-card: 4px;
	--rule-width: 1px;
	--focus-width: 2px;
	--focus-offset: 4px;
	--underline-gap: 4px;

	--hero-height: 720px;
	--banner-height: 700px;
	--closing-height: 640px;
	--tile-height: 480px;
	--overlay-list-width: 380px;
	--card-width: 270px;
	--card-height: 470px;
	--hero-slide-width: 330px;
	--hero-height-mobile: 470px;
	--banner-height-mobile: 560px;
	--closing-height-mobile: 480px;
	--header-height-mobile: 64px;
	--touch-target: 44px;
	--play-size: 84px;
	--studio-height: 640px;
	--studio-height-mobile: 340px;
	--studio-card-width: 340px;
	--popup-width: 640px;
	--detail-width-mobile: 240px; /* Detail shots row image on mobile */
	--logo-height: 32px;          /* client logos in the Trusted by row */
	--logo-max-width: 160px;
	--popup-pad: var(--space-10);
	--intro-text-width: 46ch;
	--intro-space-top: 88px;
	--band-space: 36px;
	--intro-space-bottom: 112px;

	/* ---------- Motion ---------- */

	--ease: ease;
	--ease-out: cubic-bezier(.2, .6, .2, 1);
	--duration-fast: .3s;
	--duration-medium: .6s;
	--duration-slow: .7s;
	--duration-image: 1s;
	--tile-grow: 1.4;
	--tile-shrink: .8;
	--image-zoom: 1.05;
	--nudge: 8px;
}

/* Mobile values (767px and below) */
@media (max-width: 767px) {
	:root {
		--lead-size: 17px;
		--lead-line: 1.65;
		--label-size: 11px;
		--label-tracking: .22em;
		--button-pad: 17px 24px 16px;
		--wordmark-size: 13px;
		--wordmark-tracking: .3em;
		--caption-size: 10px;
		--caption-tracking: .14em;
		--play-size: 64px;
		--intro-space-top: 44px;
		--intro-space-bottom: 56px;
		--popup-pad: var(--space-6);
		--logo-height: 24px;
		--logo-max-width: 120px;
	}
}