/* ==========================================================================
   Design tokens — the single source of truth for colour, type and shape.
   Change a value here and it updates every page.

   Blocksy reads its own --theme-* variables everywhere (links, buttons, menus,
   pagination, forms). The second block points those at the tokens, so the
   Customizer colour palette and heading sizes are overridden by this file.
   ========================================================================== */

:root {
	/* Ink and neutrals */
	--dl-ink: #0f172a;          /* headings, titles */
	--dl-text: #334155;         /* body copy (10.4:1 on white) */
	--dl-muted: #475569;        /* meta, captions (7.6:1 on white, 6.9:1 on the footer) */
	--dl-border: #e2e8f0;
	--dl-border-strong: #cbd5e1;
	--dl-surface: #ffffff;      /* cards, boxes */
	--dl-page: #f8fafc;         /* page background */
	--dl-soft: #f1f5f9;         /* footer, table headers, code */

	/* Brand accent — burnt orange. 700 passes WCAG AA for text and white-on-orange buttons. */
	--dl-accent: #c2410c;       /* links, buttons (5.2:1 on white) */
	--dl-accent-hover: #9a3412;
	--dl-accent-bright: #f97316; /* decoration only: rules, icons, underlines */
	--dl-accent-tint: #fff7ed;   /* subtle backgrounds */

	/* Topic colours (icon chips on the homepage) */
	--dl-topic-bookkeeping: #a16207;
	--dl-topic-bookkeeping-tint: #fef9c3;
	--dl-topic-taxes: #15803d;
	--dl-topic-taxes-tint: #dcfce7;
	--dl-topic-insurance: #4338ca;
	--dl-topic-insurance-tint: #e0e7ff;
	--dl-topic-career: #be185d;
	--dl-topic-career-tint: #fce7f3;

	/* Type scale (fluid between phone and desktop) */
	--dl-font-body: var(--theme-font-stack-default, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
	--dl-size-body: 17px;
	--dl-size-article: clamp(17px, 0.35vw + 15.8px, 18.5px);
	--dl-size-small: 14px;
	--dl-size-meta: 13px;
	--dl-h1: clamp(30px, 2.2vw + 22px, 42px);
	--dl-h2: clamp(24px, 1.2vw + 19px, 30px);
	--dl-h3: clamp(20px, 0.6vw + 17.5px, 23px);
	--dl-h4: 19px;
	--dl-h5: 17px;
	--dl-h6: 15px;

	/* Shape and space */
	--dl-radius-sm: 6px;
	--dl-radius: 10px;
	--dl-radius-lg: 14px;
	--dl-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.06);
	--dl-shadow-hover: 0 4px 6px -1px rgba(15, 23, 42, 0.08), 0 10px 24px -6px rgba(15, 23, 42, 0.12);
	--dl-measure: 720px;          /* article reading width */
	--dl-focus: 0 0 0 3px rgba(194, 65, 12, 0.35);
	--dl-ease: 160ms ease;
}

/* Point Blocksy's palette and global settings at the tokens. */
:root {
	--theme-palette-color-1: var(--dl-accent);
	--theme-palette-color-2: var(--dl-accent-hover);
	--theme-palette-color-3: var(--dl-text);
	--theme-palette-color-4: var(--dl-ink);
	--theme-palette-color-5: var(--dl-border);
	--theme-palette-color-6: var(--dl-soft);
	--theme-palette-color-7: var(--dl-page);
	--theme-palette-color-8: var(--dl-surface);

	--theme-font-size: var(--dl-size-body);
	--theme-line-height: 1.65;
	--theme-narrow-container-max-width: var(--dl-measure);

	--theme-button-font-weight: 600;
	--theme-button-font-size: 15px;
	--theme-button-min-height: 44px;
	--theme-button-border-radius: var(--dl-radius-sm);
	--theme-button-padding: 10px 20px;

	--theme-form-field-border-radius: var(--dl-radius-sm);
	--theme-form-field-height: 44px;

	--theme-selection-background-color: var(--dl-accent);
}

/* Heading scale: tighter line height than Blocksy's 1.5 for multi-line titles. */
h1 { --theme-font-size: var(--dl-h1); --theme-line-height: 1.18; }
h2 { --theme-font-size: var(--dl-h2); --theme-line-height: 1.25; }
h3 { --theme-font-size: var(--dl-h3); --theme-line-height: 1.3; }
h4 { --theme-font-size: var(--dl-h4); --theme-line-height: 1.4; }
h5 { --theme-font-size: var(--dl-h5); --theme-line-height: 1.4; }
h6 { --theme-font-size: var(--dl-h6); --theme-line-height: 1.4; }

/* Block editor font-size presets used in page content (Small/Medium/Large). */
:root {
	--wp--preset--font-size--small: 14px;
	--wp--preset--font-size--medium: 18px;
	--wp--preset--font-size--large: clamp(24px, 1.2vw + 19px, 30px);
	--wp--preset--font-size--x-large: clamp(28px, 2vw + 20px, 38px);
}