/*
 * Gold Penguin design tokens. Every colour, size, radius and shadow the theme
 * uses is a custom property here; nothing below this file hardcodes a value
 * that belongs to the system. Change the look here.
 *
 * Layer order (later layers win): reset, base, layout, components, templates,
 * utilities.
 */
@layer reset, base, layout, components, templates, utilities;

:root {
	/* Surfaces and ink */
	--gp-paper: #fbfbfa;          /* page background */
	--gp-paper-2: #f6f6f3;        /* quiet band */
	--gp-paper-3: #f1f0ec;        /* chips, tags */
	--gp-surface: #ffffff;        /* cards, search, nav */
	--gp-ink: #141418;            /* text, dark cards, primary buttons */
	--gp-ink-2: #3a3a40;          /* links, secondary text */
	--gp-muted: #55555c;          /* body copy on cards */
	--gp-soft: #6a6a72;           /* meta text: 5.1:1 on paper */
	--gp-line: #e4e4e1;           /* card borders */
	--gp-line-2: #ecece9;         /* section rules */
	--gp-line-strong: #cdcdc9;    /* inputs, search box */
	--gp-grid: rgba(20, 20, 30, 0.035);

	/* Accent: gold is the one signal colour. Text on gold uses --gp-on-gold. */
	--gp-gold: #f2a900;
	--gp-on-gold: #1a1400;
	--gp-gold-wash: #fffbf0;
	--gp-gold-line: #e0b04a;

	/* Judgement colours, used only for good / watch-out lists */
	--gp-good-bg: #f1fbf5;
	--gp-good-line: #cbebd8;
	--gp-good-ink: #1c6b3e;
	--gp-warn-bg: #fff4ec;
	--gp-warn-line: #f6d9c2;
	--gp-warn-ink: #9a4a12;

	/* Type */
	--gp-font: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	--gp-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
	--gp-fs-xs: 0.75rem;     /* 12 */
	--gp-fs-sm: 0.8125rem;   /* 13 */
	--gp-fs-md: 0.9375rem;   /* 15 */
	--gp-fs-base: 1.0625rem; /* 17 body */
	--gp-fs-lg: 1.1875rem;   /* 19 */
	--gp-fs-h3: 1.375rem;    /* 22 */
	--gp-fs-h2: clamp(1.75rem, 1.2rem + 1.6vw, 2.375rem);   /* 28 -> 38 */
	--gp-fs-h1: clamp(2.25rem, 1.4rem + 3.2vw, 3.625rem);   /* 36 -> 58 */
	--gp-fs-hero: clamp(2.375rem, 1.3rem + 4.4vw, 4.25rem); /* 38 -> 68 */
	--gp-track-tight: -0.045em;
	--gp-track-display: -0.04em;
	--gp-lh-body: 1.65;

	/* Space (4px base) */
	--gp-s1: 0.25rem;
	--gp-s2: 0.5rem;
	--gp-s3: 0.75rem;
	--gp-s4: 1rem;
	--gp-s5: 1.25rem;
	--gp-s6: 1.5rem;
	--gp-s8: 2rem;
	--gp-s10: 2.5rem;
	--gp-s12: 3rem;
	--gp-s16: 4rem;
	--gp-s20: 5rem;
	--gp-gutter: clamp(1rem, 4vw, 2.5rem);
	--gp-section: clamp(3rem, 2rem + 4vw, 5rem);

	/* Widths */
	--gp-wrap: 77.5rem;   /* 1240 */
	--gp-wrap-narrow: 72.5rem;
	--gp-measure: 44rem;  /* article text column */

	/* Radii */
	--gp-r-sm: 0.625rem;
	--gp-r-md: 0.875rem;
	--gp-r-lg: 1.25rem;
	--gp-r-xl: 1.5rem;
	--gp-r-2xl: 1.75rem;
	--gp-r-pill: 999px;

	/* Elevation */
	--gp-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
	--gp-shadow-md: 0 1px 2px rgba(0, 0, 0, 0.05), 0 18px 40px -16px rgba(0, 0, 0, 0.22);
	--gp-shadow-lift: 0 18px 40px -22px rgba(0, 0, 0, 0.35);
	--gp-shadow-chip: 0 2px 8px rgba(0, 0, 0, 0.12);

	/* Shared control and heading roles */
	--gp-control-height: 2.75rem;
	--gp-control-radius: var(--gp-r-sm);
	--gp-pill-height: var(--gp-control-height);
	--gp-pill-border: var(--gp-line-strong);
	--gp-card-radius: var(--gp-r-lg);
	--gp-fs-small: 0.875rem;
	--gp-fs-control: var(--gp-fs-small);
	--gp-heading-display: var(--gp-fs-hero);
	--gp-heading-section: var(--gp-fs-h2);
	--gp-heading-panel: var(--gp-fs-h3);
	--gp-heading-label: var(--gp-fs-md);

	/* Motion */
	--gp-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
	--gp-fast: 150ms;
	--gp-med: 200ms;

	/* Glyph art (pond, covers, mark) */
	--gp-glyph-cell: 10px;
}

@media (max-width: 45rem) {
	:root { --gp-fs-xs: var(--gp-fs-small); --gp-fs-sm: var(--gp-fs-small); }
}

/* Exact legacy roles retained for visual parity; consolidate only after review. */
:root {
	--gp-motion-reduced: 0.01ms;
	--gp-link-underline-offset: 0.2em;
	--gp-link-underline-width: 1px;
	--gp-ink-black: #000;
	--gp-space-hair: 4px;
	--gp-lh-heading: 1.08;
	--gp-track-heading: -0.01em;
	--gp-lh-title: 1.3;
	--gp-fs-code: 0.9em;
	--gp-selection: rgba(242, 169, 0, 0.35);
	--gp-print-margin: 15mm;
	--gp-white: #fff;
	--gp-fs-print: 11pt;
	--gp-offset-hair: -1px;
	--gp-measure-lede: 40rem;
	--gp-grid-card-min: 16rem;
	--gp-grid-small-min: 13.75rem;
	--gp-grid-large-min: 18rem;
	--gp-split-main-basis: 35rem;
	--gp-split-side-basis: 17.5rem;
	--gp-split-side-max: 22.5rem;
	--gp-skip-hidden-top: -100px;
	--gp-z-skip: 100;
	--gp-z-header: 20;
	--gp-space-roomy: 18px;
	--gp-space-rule: 2px;
	--gp-nav-glass: rgba(255, 255, 255, 0.86);
	--gp-shadow-header: var(--gp-shadow-sm), 0 8px 24px -12px rgba(0, 0, 0, 0.18);
	--gp-space-standard: 12px;
	--gp-space-tight: 6px;
	--gp-track-nav: -0.02em;
	--gp-space-control: 16px;
	--gp-nav-divider: #e1e1de;
	--gp-transparent: transparent;
	--gp-z-menu: 30;
	--gp-mega-width: min(56rem, calc(100vw - 2rem));
	--gp-shadow-popover: 0 30px 60px -28px rgba(0, 0, 0, 0.35), var(--gp-shadow-sm);
	--gp-motion-instant: 0s;
	--gp-mega-bridge-top: -14px;
	--gp-space-label: 14px;
	--gp-mega-articles-width: min(62rem, calc(100vw - 2rem));
	--gp-offset-tight: -6px;
	--gp-lh-menu: 1.35;
	--gp-cover-menu-height: 5.5rem;
	--gp-fs-name: 1.125rem;
	--gp-space-large: 28px;
	--gp-space-detail: 7px;
	--gp-space-micro: 5px;
	--gp-space-small: 8px;
	--gp-offset-standard: -10px;
	--gp-menu-min-width: 14rem;
	--gp-icon-large: 26px;
	--gp-lh-icon: 0;
	--gp-space-panel: 20px;
	--gp-space-chip: 11px;
	--gp-paper-chip: #fafaf8;
	--gp-line-chip-hover: #b8b8b4;
	--gp-ink-hover: #111;
	--gp-on-gold-tag: #241a00;
	--gp-ink-tag: #4a4a52;
	--gp-shadow-pill-selected: 0 0 0 2px #fff;
	--gp-measure-search: 42.5rem;
	--gp-focus-width: 3px;
	--gp-z-suggest: 40;
	--gp-nav-caret-width: 24px;       /* caret hit area: WCAG 2.5.8 minimum, so it sits close to its label */
	--gp-search-dialog-top: 12vh;
	--gp-scrim: rgba(20, 20, 24, 0.32);
	--gp-suggest-max-height: min(26rem, 60vh);
	--gp-line-soft: #ededea;
	--gp-cover-default-height: 10rem;
	--gp-z-art: 1;
	--gp-z-label: 3;
	--gp-z-content: 2;
	--gp-fs-cover: 2.125rem;
	--gp-lh-cover: 0.95;
	--gp-track-cover: -0.05em;
	--gp-track-label: -0.03em;
	--gp-lh-label: 1.05;
	--gp-shadow-cover-label: 0 4px 14px rgba(0, 0, 0, 0.14);
	--gp-cover-labelled-top: 54px;
	--gp-cover-versus-size: 40px;
	--gp-shadow-cover-versus: 0 4px 14px rgba(0, 0, 0, 0.18);
	--gp-space-inset: 9px;
	--gp-fs-cover-large: clamp(2.125rem, 1.5rem + 2vw, 3.5rem);
	--gp-fs-cover-display: clamp(2.75rem, 1.6rem + 3.6vw, 5.25rem);
	--gp-line-card-hover: #c9c9c5;
	--gp-cover-card-height: 10.625rem;
	--gp-cover-feature-height: clamp(15rem, 12rem + 10vw, 23.75rem);
	--gp-space-card: 22px;
	--gp-fs-feature-title: clamp(1.5rem, 1.2rem + 1vw, 1.875rem);
	--gp-track-feature: -0.035em;
	--gp-shadow-tile-hover: 0 0 0 2px var(--gp-ink);
	--gp-cover-category-height: 8.125rem;
	--gp-grid-category-min: 9rem;
	--gp-cover-category-mobile-height: 6.5rem;
	--gp-cover-pick-height: 15rem;
	--gp-z-flag: 4;
	--gp-promo-padding: clamp(1.5rem, 4vw, 3rem);
	--gp-promo-copy-basis: 23.75rem;
	--gp-fs-promo-title: clamp(2.125rem, 1.4rem + 2.4vw, 3.5rem);
	--gp-lh-display: 1.02;
	--gp-ink-on-dark-muted: #c9c9d0;
	--gp-measure-promo: 29rem;
	--gp-lh-lede: 1.55;
	--gp-line-on-dark: #3a3a42;
	--gp-ink-on-dark-chip: #d8d8de;
	--gp-space-wide: 32px;
	--gp-halo-core: rgba(250, 250, 249, 0.8);
	--gp-halo-middle: rgba(250, 250, 249, 0.35);
	--gp-halo-edge: rgba(250, 250, 249, 0);
	--gp-fs-bullet: 15.5px;
	--gp-lh-compact: 1.5;
	--gp-ink-copy: #26262c;
	--gp-bullet-marker-top: 0.55em;
	--gp-avatar-size: 48px;
	--gp-avatar-size-sm: 24px;
	--gp-author-photo-size: 112px;
	--gp-avatar-surface: #e9e8e3;
	--gp-verdict-label-width: 7rem;
	--gp-lh-stat: 1.1;
	--gp-shadow-selected: 0 0 0 1px var(--gp-gold);
	--gp-grid-step-min: 13rem;
	--gp-formcard-padding: clamp(1.25rem, 3vw, 2rem);
	--gp-radius-panel-fixed: 24px;
	--gp-line-note: #cfcfcb;
	--gp-border-dashed-width: 1.5px;
	--gp-ink-crumb-separator: #c4c4c8;
	--gp-crumb-measure: 28ch;
	--gp-control-size-fixed: 44px;
	--gp-halo-newsletter-width: 51.25rem;
	--gp-halo-newsletter-height: 20rem;
	--gp-fs-newsletter-title: clamp(1.875rem, 1.4rem + 1.6vw, 2.75rem);
	--gp-newsletter-form-width: min(28.75rem, 100%);
	--gp-lh-prose: 1.7;
	--gp-prose-stack: 1.1em;
	--gp-prose-h2-space: 2.2em;
	--gp-prose-h3-space: 1.8em;
	--gp-prose-h4-space: 1.5em;
	--gp-prose-heading-follow-space: 0.6em;
	--gp-prose-list-indent: 1.3em;
	--gp-prose-list-space: 0.4em;
	--gp-prose-rule-space: 2.4em;
	--gp-fs-comments-title: clamp(1.5rem, 1.2rem + 1vw, 2rem);
	--gp-comment-meta-indent: 42px;
	--gp-lh-detail: 1.6;
	--gp-comment-form-padding: clamp(1.25rem, 3vw, 1.75rem);
	--gp-textarea-comment-height: 140px;
	--gp-toc-max-height: 50vh;
	--gp-line-toc: #ececea;
	--gp-lh-toc: 1.4;
	--gp-offset-small: -8px;
	--gp-footer-about-measure: 17rem;
	--gp-footer-columns-width: 50rem;
	--gp-fs-footer-word: clamp(4rem, 14vw, 12.5rem);
	--gp-lh-wordmark: 0.85;
	--gp-track-wordmark: -0.06em;
	--gp-textarea-height: 120px;
	--gp-honeypot-offset: -9999px;
	--gp-error-surface: #fdecea;
	--gp-error-line: #f3b8b1;
	--gp-motion-checklist: 0.2s;
	--gp-step-input-height: 3.5rem;   /* listing form: one question per step */
	--gp-step-bar-height: 4px;
	--gp-checklist-empty-surface: #efefec;
	--gp-checklist-empty-ink: #9a9aa0;
	--gp-cover-result-height: 4.75rem;
	--gp-cover-comparison-height: clamp(13rem, 9rem + 10vw, 20rem);
	--gp-cover-alternative-height: 5.25rem;
	--gp-z-hero: 5;
	--gp-hero-padding-bottom: 72px;
	--gp-hero-full-height: max(860px, 100svh);
	--gp-hero-full-padding-bottom: 96px;
	--gp-hero-mid-height: 30rem;
	--gp-halo-mid-height: 26rem;
	--gp-ink-hero: #111114;
	--gp-hero-lede-measure: 36rem;
	--gp-hero-mobile-padding-top: 140px;
	--gp-hero-mobile-min-height: max(38rem, 88svh);  /* phone homepage hero: most of the first screen */
	--gp-halo-mobile-height: 34rem;
	--gp-result-cover-column: 7.5rem;
	--gp-cover-article-height: clamp(15rem, 10rem + 16vw, 25rem);
	--gp-lh-page-title: 1.04;
	--gp-article-main-basis: 34rem;
	--gp-cover-tool-height: clamp(13.75rem, 9rem + 14vw, 21.25rem);
	--gp-track-eyebrow: 0.06em;
	--gp-vendor-example-width: 22rem;
	--gp-ink-unavailable: #b4b4ba;
	--gp-picker-width: 52rem;
	--gp-space-major: 36px;
	--gp-alternative-cover-column: 8.5rem;
	--gp-alternative-action-column: 12rem;  /* every row's Try button is the same width */
	--gp-vendor-grid-basis: 32rem;
	--gp-compat-paragraph-space: 1.4em;
	--gp-compat-button-height: 46px;
	--gp-print-line: #999;
	--gp-fs-print-table: 10pt;
	--gp-print-cell-block: 4pt;
	--gp-print-cell-inline: 6pt;
}

:root { --gp-cover-name-max: 2.25rem; --gp-halo-width: 61.25rem; }

:root { --gp-space-inline: 10px; --gp-fs-copy: 1rem; --gp-fs-stat: 2rem; }