/**
 * Tim Scott: design tokens.
 *
 * Every value here is lifted from the old whitelabel7 dream.css :root
 * (see _reference/css-spec/README.md "Custom properties") or from the
 * matched rules in dream-used.css. Nothing is invented.
 *
 * Naming:
 * - The old names (--primary, --tertiary, --white, --link …) are kept as
 *   they were: the editor palette (inc/setup.php) prints
 *   --wp--preset--color--{slug}: var(--{slug}) through global-styles, so
 *   stored content and the .has-{slug}-color / -background-color classes
 *   core prints resolve through these exact names.
 * - Theme-owned values that had no custom property (fonts, type scale,
 *   containers, z-index, motion) are --tsc-*.
 *
 * Breakpoints (the old Bootstrap $grid-breakpoints, in em so they follow
 * the user's font size; custom properties cannot be used inside @media):
 *   sm    23.75em  (380px)
 *   md    36em     (576px)
 *   lg    48em     (768px)   navbar-expand-lg: the header nav expands here
 *   xl    64em     (1024px)
 *   xxl   90em     (1440px)
 *   xxxl  111.25em (1780px)
 *   (150em and 225em never matched at the widths the site is checked at.)
 * Mobile first: base rules are the phone layout, every @media is min-width.
 *
 * @package TSC
 */

:root {
	/* ── Palette (dream.css :root) ─────────────────────────────── */
	--primary: #2e3e72;
	--secondary: #f6f6f6;
	--tertiary: #f36b5b;
	--quaternary: #fdd700;
	--quinary: #111e49;
	--senary: #606060;
	--septenary: #707070;
	--octonary: #f2f2f2;
	--nonary: #b2b2b2;
	--denary: #dedede;
	/*
	 * The editor palette's tenth slug is "decenary" (inc/setup.php, copied
	 * from the old theme-support.php), but dream.css only ever defined
	 * --denary, so the old swatch was empty. Aliased so the editor shows
	 * the colour the slug was meant to carry; no published content uses it.
	 */
	--decenary: var(--denary);
	--light: #f2f2f2;
	--dark: #757575;
	--white: #fff;
	--black: #000;
	--concrete: #f2f2f2;

	/* ── Roles (dream.css :root) ───────────────────────────────── */
	--header-link: #2e3e72;
	--header-link-hover: #fff;
	--footer-bg: #2e3e72;
	--footer-link: #fff;
	--footer-link-hover: #fff;
	--social-nav: #fff;
	--social-nav-hover: #2e3e72;
	--social-nav-bg: #f36b5b;
	--social-nav-bg-hover: #2e3e72;
	--body-bg: #fff;
	--body-text: #757575;
	--link: #f36b5b;
	--link-hover: #2e3e72;

	/* Editor gradient presets (inc/setup.php), as dream.css defined them. */
	--primary-secondary-horizontal: linear-gradient(90deg, var(--primary), var(--secondary));
	--tertiary-quaternary-vertical: linear-gradient(0deg, var(--tertiary), var(--quaternary));
	--quinary-senary-diagonal-up: linear-gradient(45deg, var(--quinary), var(--senary));
	--septenary-octonary-diagonal-down: linear-gradient(135deg, var(--septenary), var(--octonary));
	--nonary-denary-diagonal-down: linear-gradient(135deg, var(--nonary), var(--denary));
	--primary-secondary-radial: radial-gradient(ellipse at center, var(--primary) 0%, var(--secondary) 100%);

	/* Literal colours the matched rules use without a custom property. */
	--tsc-pagination-text: #707070;          /* .pagination li */
	--tsc-modal-veil: hsla(0, 0%, 100%, 0.8); /* .modal (components/_modal.scss) */
	--tsc-nav-veil: hsla(0, 0%, 100%, 0.9);   /* the open mobile nav panel */
	--tsc-card-shade: #000;                   /* .card.issue / .card.news :before */
	--tsc-timeline-text: #333;                /* .timeline__content: jQuery Timeline v1.2.0's text colour (home, Meet Tim) */
	--tsc-modal-shadow: 0.1875rem 0.1875rem 0.375rem 0 rgba(0, 0, 0, 0.16);
	--tsc-input-shadow: 0 0.1875rem 0.375rem 0 hsla(0, 0%, 69.8%, 0.16);
	--tsc-title-shadow: 0.125rem 0.125rem 0.125rem rgba(0, 0, 0, 0.4);
	--tsc-nav-shadow: 0.0625rem 0.0625rem 0.1875rem rgba(0, 0, 0, 0.125);

	/* ── Fonts ─────────────────────────────────────────────────── */
	/*
	 * rift: Adobe Fonts kit ytp2olu (400/500/600/700; no 900 face, so the
	 * headings' font-weight 900 renders the 700 face, as it always did).
	 * Georgia: body copy (system). Butler: /stories/ only (base.css).
	 */
	--tsc-font-heading: rift, sans-serif;
	--tsc-font-body: Georgia, Times, "Times New Roman", serif;
	--tsc-font-button: rift, sans-serif;
	--tsc-font-butler-bold: butlerbold, serif;
	--tsc-font-butler-medium: butlermedium, serif;
	--tsc-font-butler-regular: butlerregular, serif;
	--tsc-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	/* ── Type scale (bootstrap/_type.scss + _elements.scss) ───── */
	--tsc-font-size-root: 16px;
	--tsc-font-size-body: 1rem;
	--tsc-font-size-copy: 1.0625rem;     /* p, li */
	--tsc-line-height-body: 1.8823529412;
	--tsc-font-size-h1: 3.25rem;
	--tsc-font-size-h2: 2.9375rem;
	--tsc-font-size-h3: 2.75rem;
	--tsc-font-size-h4: 2.5rem;
	--tsc-font-size-h5: 2.125rem;
	--tsc-font-size-h6: 1.8125rem;
	--tsc-font-size-display-3: 4.5rem;
	--tsc-heading-weight: 900;
	--tsc-heading-line-height: 1;

	/* Page title (.article-title) steps: 390 / 768 / 1024 / 1440. */
	--tsc-title-size: 1.75rem;
	--tsc-title-line-height: 1.2857142857;
	--tsc-title-size-lg: 2.9375rem;
	--tsc-title-line-height-lg: 1.170212766;
	--tsc-title-size-xl: 3.375rem;
	--tsc-title-line-height-xl: 1.1111111111;
	--tsc-title-size-xxl: 3.875rem;
	--tsc-title-line-height-xxl: 1.0967741935;

	/* ── Layout ────────────────────────────────────────────────── */
	--tsc-gutter: 0.75rem;              /* half the Bootstrap gutter */
	--tsc-container-sm: 22.5rem;        /* >= 23.75em */
	--tsc-container-md: 33.75rem;       /* >= 36em */
	--tsc-container-lg: 45rem;          /* >= 48em */
	--tsc-container-xl: 60rem;          /* >= 64em */
	--tsc-container-xxl: 87.5rem;       /* >= 90em */
	--tsc-container-xxxl: 106.75rem;    /* >= 111.25em */
	--tsc-body-padding: 0.625rem;       /* the white frame round every page */
	--tsc-body-padding-lg: 0.9375rem;   /* >= 48em */

	/*
	 * Anchor offset. The old smoothScroll() (00-protons/index.js) scrolled
	 * every in-page link to the target's top minus 221px; html
	 * scroll-padding-top lands native anchor jumps in the same place.
	 */
	--tsc-anchor-offset: 221px;

	/* ── Z-index scale (dream.css values) ─────────────────────── */
	--tsc-z-raised: 1;          /* .card-content-wrapper-outer > * */
	--tsc-z-jumbotron: 2;       /* .jumbotron, .share-button, play buttons */
	--tsc-z-header: 3;          /* .site-header, the open mobile nav */
	--tsc-z-header-top: 4;      /* branding + toggler above the open nav */
	--tsc-z-skip: 6;            /* .skip-nav */
	--tsc-z-backdrop: 1040;     /* .modal-backdrop */
	--tsc-z-modal: 1050;        /* .modal */

	/* ── Motion ────────────────────────────────────────────────── */
	--tsc-duration: 0.25s;
	--tsc-ease: ease-in-out;
	--tsc-transition: 0.25s ease-in-out;
	--tsc-duration-fade: 0.15s;         /* .fade */
	--tsc-duration-modal: 0.3s;         /* .modal.fade .modal-dialog */
}