/*
 * Guides 'n' Blanks — design tokens
 * ---------------------------------------------------------------------------
 * One place for colour, type and spacing. Templates and components reference
 * these and never hard-code a value, which is what keeps sizing consistent
 * across pages instead of drifting per template.
 *
 * The live site currently declares sixteen different font sizes and four
 * weights of Helvetica Neue across two stylesheets. That is the main reason it
 * reads as dated: nothing lines up because nothing shares a scale.
 */

:root {
	/* ---------------------------------------------------------------------
	 * Colour
	 *
	 * The brand cyan is kept exactly as it is — #00afd1, hue 190deg — because
	 * it is the brand. But at 2.61:1 against white it fails WCAG AA for text
	 * (4.5:1) and for interface components (3:1), so it cannot legally carry
	 * text either as a foreground or as a button background.
	 *
	 * The resolution is tints and shades of the same hue rather than a new
	 * colour: --brand stays for fills, rules and icons, and darker steps of the
	 * identical hue do the work wherever text is involved. Side by side they
	 * read as one colour family; the palette is not being changed, it is being
	 * completed.
	 *
	 * Measured contrast against white is noted on each token.
	 * ------------------------------------------------------------------- */

	--gnb-brand:        #00afd1;  /* 2.61:1 — identity fills, rules, icons. Never text. */
	--gnb-brand-ui:     #00a2c2;  /* 3.02:1 — passes AA for large text and UI components */
	--gnb-brand-ink:    #008099;  /* 4.62:1 — passes AA for body text, links, buttons */
	--gnb-brand-deep:   #00636f;  /* headings that need more weight than -ink */
	--gnb-brand-hero:   #0097b3;  /* 3.46:1 — the live hero's cyan block, darkened just
	                                 enough to carry white. The live value is #03aed2,
	                                 which is 2.63:1 and fails even the large-text
	                                 threshold. Only ever used behind text held at
	                                 24px or larger, where 3:1 is the AA requirement. */
	--gnb-hero-wash:    #e4f7fd;  /* sampled from the live banner's background gradient */
	--gnb-brand-tint:   #e5f7fa;  /* the site's existing pale cyan, kept as a surface */
	--gnb-brand-tint-2: #f4fcfd;  /* a lighter step, for alternating section bands */

	/*
	 * The live site's green — the navigation bar and the footer newsletter
	 * strip. Kept at the exact value. White text on it is only 2.25:1, so the
	 * text on these bands is dark (--gnb-ink at 5.53:1) rather than white. The
	 * brand colour is untouched; only the text colour differs from live.
	 */
	--gnb-accent:       #58bf99;  /* nav and newsletter bands, with dark text */
	--gnb-accent-lg:    #399873;  /* 3.55:1 — the brand green for LARGE text only. Live
	                                 sets the featured price in #58bf99, which is 2.25:1
	                                 on white and fails even the large-text threshold.
	                                 This is the same hue, darkened just past 3:1. */
	--gnb-accent-ink:   #328466;  /* 4.54:1 — the same green where it must carry white */
	--gnb-accent-dark:  #2b7358;  /* hover state for items on the green bands */

	/*
	 * The promotional strip. The live site uses pure #ff0000, which carries
	 * white 14px text at 4.00:1 and just misses AA. Dropping the lightness by
	 * four points reaches 4.63:1 and is indistinguishable side by side.
	 */
	--gnb-promo:        #eb0000;

	--gnb-ink:          #343434;  /* 12.45:1 — body copy, unchanged from the live site */
	--gnb-ink-soft:     #5d5d5d;  /*  6.58:1 — secondary copy, unchanged */
	--gnb-ink-faint:    #767676;  /*  4.54:1 — the lightest grey that still passes AA */

	--gnb-sale:         #d40000;  /*  5.53:1 — the live site uses #ff0000 at 4.00:1, which fails */
	--gnb-surface:      #ffffff;
	--gnb-surface-alt:  #f7f8f8;
	/* Neutrals the redesign introduces: card borders and the section bands. */
	--gnb-line-soft:    #d8dee0;  /* card and tile borders */
	--gnb-surface-2:    #f5f7f8;  /* the media well inside a card */
	--gnb-band:         #eef3f5;  /* the Featured band */
	--gnb-band-line:    #dde5e8;
	--gnb-band-tint:    #e7f2f5;  /* the Advice band */
	--gnb-band-tint-line: #cfe3e8;
	--gnb-hero-bg:      #343434;  /* the hero field */
	--gnb-hero-copy:    #e6eaeb;  /* 10.28:1 on the hero */
	--gnb-hero-meta:    #c6cdcf;  /*  7.73:1 on the hero */
	--gnb-hero-eyebrow: #7fd4b4;  /*  7.10:1 on the hero */
	--gnb-hero-rule:    #575757;
	--gnb-on-brand:     #10201f;  /* 6.45:1 on the brand cyan, 7.47:1 on the green */

	--gnb-surface-bar:  #eaeaea;  /* the grey toolbar above and below the product grid, as live sets it */
	--gnb-line:         #dcdfe0;  /* borders — decorative, so no contrast requirement */
	--gnb-line-strong:  #b4babc;  /* 3.06:1 — for borders that convey state, e.g. inputs */

	--gnb-focus:        #00636f;  /* focus rings: deliberately dark so they show on tint */

	/* ---------------------------------------------------------------------
	 * Type
	 *
	 * A 1.25 ratio scale from a 1rem base. Six steps replace sixteen ad-hoc
	 * sizes. The three largest are fluid so headings shrink on phones without
	 * needing a breakpoint each.
	 *
	 * Helvetica Neue is retained as the brand face. The live site loads four
	 * separate self-hosted weights; the stack below falls back through the
	 * system Helvetica/Arial line, so nothing shifts if a font file is slow.
	 * ------------------------------------------------------------------- */

	/*
	 * The redesign specifies IBM Plex Sans. This is the one change in it that
	 * reaches beyond the homepage — the typeface is site-wide — so it is a
	 * single pair of values to revert if the brand face is to stay Helvetica.
	 */
	--gnb-font-body: "IBM Plex Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--gnb-font-head: "IBM Plex Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;

	--gnb-text-xs:  0.75rem;    /* 12px — legal text, badges */
	--gnb-text-sm:  0.875rem;   /* 14px — captions, meta */
	--gnb-text-md:  1rem;       /* 16px — body. The live site sets 14px, which is small for long copy */
	--gnb-text-lg:  1.25rem;    /* 20px — lead paragraphs, card titles */
	--gnb-text-xl:  clamp(1.375rem, 1.15rem + 1.1vw, 1.5625rem);   /* 22 → 25px */
	--gnb-text-2xl: clamp(1.625rem, 1.2rem + 2.1vw, 1.953rem);     /* 26 → 31px */
	--gnb-text-3xl: clamp(1.875rem, 1.25rem + 3.1vw, 2.441rem);    /* 30 → 39px */

	--gnb-weight-normal: 400;
	--gnb-weight-medium: 500;
	--gnb-weight-bold:   700;

	--gnb-leading-tight: 1.15;  /* headings */
	--gnb-leading-snug:  1.35;  /* card titles, short blocks */
	--gnb-leading-body:  1.6;   /* body copy — the live site runs 1.2, which is tight to read */

	--gnb-measure: 68ch;        /* maximum line length for readable prose */

	/* ---------------------------------------------------------------------
	 * Spacing — a 4px base, doubling roughly every two steps. Every gap,
	 * padding and margin on the site comes from this list.
	 * ------------------------------------------------------------------- */

	--gnb-space-3xs: 0.25rem;   /*  4px */
	--gnb-space-2xs: 0.5rem;    /*  8px */
	--gnb-space-xs:  0.75rem;   /* 12px */
	--gnb-space-sm:  1rem;      /* 16px */
	--gnb-space-md:  1.5rem;    /* 24px */
	--gnb-space-lg:  2rem;      /* 32px */
	--gnb-space-xl:  3rem;      /* 48px */
	--gnb-space-2xl: 4rem;      /* 64px */
	--gnb-space-3xl: 6rem;      /* 96px */

	/*
	 * Vertical rhythm between page sections, fluid so phones are not wasteful.
	 *
	 * This is padding on each section, so the gap between two of them is twice
	 * the value. Measured on the live homepage, the gaps between sections run
	 * 28-66px, averaging about 50. At 2.5-5rem this was producing 160-168px,
	 * roughly three times live's, which is what made the page feel loose.
	 */
	--gnb-section-gap: clamp(1.25rem, 0.9rem + 1.2vw, 1.625rem);

	/* ---------------------------------------------------------------------
	 * Layout
	 * ------------------------------------------------------------------- */

	--gnb-container: 1280px;    /* the live site runs 1170px; a little wider suits the product grids */
	--gnb-gutter: clamp(1rem, 0.5rem + 2vw, 2rem);   /* never less than the 16px the brief asks for */

	--gnb-radius-sm: 3px;
	--gnb-radius-md: 6px;
	--gnb-radius-lg: 10px;

	--gnb-shadow-sm: 0 1px 2px rgb(52 52 52 / 8%);
	--gnb-shadow-md: 0 2px 8px rgb(52 52 52 / 10%);
	--gnb-shadow-lg: 0 6px 24px rgb(52 52 52 / 12%);

	--gnb-transition: 150ms ease;
}

/*
 * Breakpoints are documented here for reference; CSS custom properties cannot
 * be used in media queries, so the values are repeated literally in the
 * stylesheets. Keep them in step with this list.
 *
 *   480px   large phone
 *   768px   tablet
 *  1024px   small laptop
 *  1200px   navigation switches from mobile to desktop (per the house standard)
 *  1280px   maximum content width
 */