/* ===========================================================================
   Stockholms Krogbolag — Token-brygga
   Aliasar källans originalnamn (--color-*, --font-*, --fs-*, …) till de
   WP-genererade variablerna från theme.json (--wp--preset--*, --wp--custom--*).
   Detta gör att porterad komponent-CSS i senare paket (WP-2/WP-4/WP-6) kan
   använda var(--color-gold), var(--font-display), var(--space-5) rakt av,
   samtidigt som Global Styles fortsatt styr de faktiska värdena.
   Laddas på både frontend och i editorn via functions.php.
   =========================================================================== */

:root {
	/* --- Brand palette + tints/shades ------------------------------------ */
	--color-bg:         var(--wp--preset--color--bg);
	--color-ink:        var(--wp--preset--color--ink);
	--color-gold:       var(--wp--preset--color--gold);
	--color-blue:       var(--wp--preset--color--blue);
	--color-sage:       var(--wp--preset--color--sage);
	--color-teal:       var(--wp--preset--color--teal);
	--color-red:        var(--wp--preset--color--red);

	--color-paper-deep: var(--wp--preset--color--paper-deep);
	--color-paper-edge: var(--wp--preset--color--paper-edge);
	--color-ink-soft:   var(--wp--preset--color--ink-soft);
	--color-ink-mute:   var(--wp--preset--color--ink-mute);

	--color-red-deep:   var(--wp--preset--color--red-deep);
	--color-gold-deep:  var(--wp--preset--color--gold-deep);
	--color-blue-deep:  var(--wp--preset--color--blue-deep);
	--color-teal-deep:  var(--wp--preset--color--teal-deep);
	--color-sage-deep:  var(--wp--preset--color--sage-deep);
	--color-sage-tint:  var(--wp--preset--color--sage-tint);
	--color-blue-tint:  var(--wp--preset--color--blue-tint);
	--color-gold-tint:  var(--wp--preset--color--gold-tint);
	--color-red-tint:   var(--wp--preset--color--red-tint);

	/* --- Font families --------------------------------------------------- */
	--font-display: var(--wp--preset--font-family--display);
	--font-mono:    var(--wp--preset--font-family--mono);
	--font-body:    var(--wp--preset--font-family--body);

	/* --- Weights --------------------------------------------------------- */
	--fw-body:      var(--wp--custom--font-weight--body);
	--fw-mono:      var(--wp--custom--font-weight--mono);
	--fw-mono-bold: var(--wp--custom--font-weight--mono-bold);
	--fw-display:   var(--wp--custom--font-weight--display);

	/* --- Display scale --------------------------------------------------- */
	--fs-hero:    var(--wp--preset--font-size--hero);
	--fs-display: var(--wp--preset--font-size--display);
	--fs-title:   var(--wp--preset--font-size--title);
	--fs-heading: var(--wp--preset--font-size--heading);

	--lh-display: var(--wp--custom--line-height--display);
	--lh-title:   var(--wp--custom--line-height--title);
	--tracking-display: var(--wp--custom--tracking--display);

	/* --- Body scale ------------------------------------------------------ */
	--fs-lead:  var(--wp--preset--font-size--lead);
	--fs-body:  var(--wp--preset--font-size--body);
	--fs-small: var(--wp--preset--font-size--small);
	--lh-body:  var(--wp--custom--line-height--body);
	--lh-lead:  var(--wp--custom--line-height--lead);

	/* --- Mono scale ------------------------------------------------------ */
	--fs-mono-lg: var(--wp--custom--font-size--mono-lg);
	--fs-mono:    var(--wp--custom--font-size--mono);
	--fs-mono-sm: var(--wp--custom--font-size--mono-sm);
	--fs-mono-xs: var(--wp--custom--font-size--mono-xs);
	--tracking-mono:      var(--wp--custom--tracking--mono);
	--tracking-mono-wide: var(--wp--custom--tracking--mono-wide);
	--lh-mono:    var(--wp--custom--line-height--mono);

	/* --- Spacing scale --------------------------------------------------- */
	--space-1: var(--wp--preset--spacing--1);
	--space-2: var(--wp--preset--spacing--2);
	--space-3: var(--wp--preset--spacing--3);
	--space-4: var(--wp--preset--spacing--4);
	--space-5: var(--wp--preset--spacing--5);
	--space-6: var(--wp--preset--spacing--6);
	--space-7: var(--wp--preset--spacing--7);
	--space-8: var(--wp--preset--spacing--8);
	--space-9: var(--wp--preset--spacing--9);

	/* --- Layout ---------------------------------------------------------- */
	--container:      var(--wp--custom--layout--container);
	--container-text: var(--wp--custom--layout--container-text);
	--gutter:         var(--wp--custom--layout--gutter);
	--section-y:      var(--wp--custom--layout--section-y);
	--header-h:       var(--wp--custom--layout--header-h);

	/* --- Radii ----------------------------------------------------------- */
	--radius-sm:   var(--wp--custom--radius--sm);
	--radius-md:   var(--wp--custom--radius--md);
	--radius-lg:   var(--wp--custom--radius--lg);
	--radius-pill: var(--wp--custom--radius--pill);

	/* --- Borders --------------------------------------------------------- */
	--bw-hair:   var(--wp--custom--border-width--hair);
	--bw-rule:   var(--wp--custom--border-width--rule);
	--bw-strong: var(--wp--custom--border-width--strong);

	/* --- Shadows --------------------------------------------------------- */
	--shadow-sm:    var(--wp--custom--shadow--sm);
	--shadow-md:    var(--wp--custom--shadow--md);
	--shadow-lg:    var(--wp--custom--shadow--lg);
	--shadow-stamp: var(--wp--custom--shadow--stamp);

	/* --- Motion ---------------------------------------------------------- */
	--ease-out: var(--wp--custom--motion--ease-out);
	--dur-fast: var(--wp--custom--motion--dur-fast);
	--dur:      var(--wp--custom--motion--dur);
	--dur-slow: var(--wp--custom--motion--dur-slow);

	/* --- Semantic aliases (kaskaderar från primitiverna ovan) ------------ */
	--surface-page:     var(--color-bg);
	--surface-card:     #F8F5EC;
	--surface-recessed: var(--color-paper-deep);
	--surface-ink:      var(--color-ink);
	--surface-teal:     var(--color-teal);
	--surface-sage:     var(--color-sage);

	--text-primary:      var(--color-ink);
	--text-secondary:    var(--color-ink-soft);
	--text-muted:        var(--color-ink-mute);
	--text-on-dark:      var(--color-bg);
	--text-on-dark-mute: #B7BCC2;
	--text-link:         var(--color-gold-deep);
	--text-heading:      var(--color-ink);
	--text-heading-alt:  var(--color-gold);
	--text-eyebrow:      var(--color-blue);

	--border-hairline: var(--color-paper-edge);
	--border-strong:   var(--color-ink);

	--cta-bg:       var(--color-red);
	--cta-bg-hover: var(--color-red-deep);
	--cta-text:     var(--color-bg);

	--stamp-sage-bg:  var(--color-sage);
	--stamp-teal-bg:  var(--color-blue);
	--stamp-text:     var(--color-ink);
	--stamp-text-alt: var(--color-bg);

	--focus-ring: var(--color-blue);

	--watermark: var(--wp--custom--watermark);
}

/* ===========================================================================
   Bas som theme.json inte kan uttrycka
   (rubrik-/länk-/typografireglerna ligger i theme.json `styles`).
   =========================================================================== */

/* Varm pappersgrain så bakgrunden aldrig läser platt/SaaS (från källans body).
   Härledd ur palettens ink + gold via color-mix → följer vald style variation. */
body {
	background-image:
		radial-gradient(color-mix(in srgb, var(--color-ink) 2.2%, transparent) 1px, transparent 1px),
		radial-gradient(color-mix(in srgb, var(--color-gold) 1.8%, transparent) 1px, transparent 1px);
	background-size: 3px 3px, 7px 7px;
	background-position: 0 0, 2px 3px;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* Fokusring i temats blå ton */
:focus-visible {
	outline: var(--bw-rule) solid var(--focus-ring);
	outline-offset: 2px;
}