/*
 * Design tokens — single source of truth for all blocks and templates.
 * Edit ONLY via team agreement (see CLAUDE.md §4 and §12 Decisions log).
 *
 * Direction: "Kaffefläck" (Swedish market, site #3) — handmade whimsical.
 * A warm cream page that is never white, one loud orange, one acid yellow
 * that only ever appears on ink, and everything framed in a 2px ink rule
 * with a hard offset shadow. Nothing blurs: depth comes from a solid black
 * offset, not from a soft glow.
 *
 * Three type roles that never mix (this is the load-bearing rule):
 *   display  Fredoka, UPPERCASE, orange, ink-stroked  → h1/h2, hero, banners
 *   subhead  Fredoka, no stroke, ink, title case      → h3/h4, card titles
 *   body     Courier Prime, monospace                 → EVERYTHING else
 */

/* ---------- Fonts (self-hosted, latin subset — covers å ä ö) ---------- */

@font-face {
	font-family: 'Fredoka';
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url('../fonts/fredoka-vf.woff2') format('woff2');
}

/* Courier Prime has no variable cut — two static weights is the whole family
   we use. Together they are still lighter than one variable serif was. */
@font-face {
	font-family: 'Courier Prime';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/courier-prime-400.woff2') format('woff2');
}

@font-face {
	font-family: 'Courier Prime';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/courier-prime-700.woff2') format('woff2');
}

/* ---------- Tokens ---------- */

:root {
	/* Surfaces. The page is cream, NEVER white — that single value carries the
	   handmade tone. Cards are the white, so a card genuinely lifts off. */
	--sn-bg:            #FDF9E3;   /* page (warm cream) */
	--sn-surface:       #FFFFFF;   /* cards / panels */
	--sn-surface-2:     #F7F0D0;   /* toned rows, input bg, tinted bands */
	--sn-border:        #1A1A1A;   /* INK. Everything is framed in the dark. */

	/* Text. --sn-text-muted must clear 4.5:1 on the DARKEST surface it lands
	   on, which is --sn-surface-2: #666 reads 5.0 there and 5.4 on the page. */
	--sn-heading:       #1A1A1A;   /* ink */
	--sn-text:          #555555;   /* 7.0 on cream */
	--sn-text-muted:    #666666;

	/* Brand. The orange is the identity and is kept EXACTLY as specified.
	   CONTRAST NOTE, deliberate: white on #F0603A reads 3.26:1, which is AA
	   for LARGE text only — so every white label on an orange fill is Fredoka
	   700 at >=19px (the 18.66px bold large-text threshold). Anything smaller
	   on an orange fill uses ink (5.3:1), never white. Body links do not use
	   the brand orange at all; they use --sn-accent below (5.7:1). */
	--sn-primary:       #F0603A;   /* brand orange — CTAs, display fill */
	--sn-primary-hover: #DB4A24;
	--sn-primary-dark:  #FFFFFF;   /* text ON orange (large + bold only) */
	--sn-accent:        #B03A18;   /* burnt orange — running-text links, 5.7:1 */
	--sn-pink:          #F0603A;   /* heading markers */
	--sn-gold:          #F5D800;   /* acid yellow — ONLY on ink, or as a fill
	                                  behind an ink glyph (11.9:1 both ways).
	                                  On cream it reads 1.35:1 — never text. */

	/* Chrome (topbar/footer/dark panels) — token names kept for compatibility */
	--sn-purple:        #1A1A1A;   /* topbar */
	--sn-purple-2:      #212121;
	--sn-purple-deep:   #1C1C1C;   /* footer + every dark panel */
	--sn-purple-tint:   rgba(240, 96, 58, .10);
	--sn-on-chrome:     #FFFFFF;   /* text/icons on ink */

	/* Semantic (callouts etc.) — kept inside the warm family; no blues. */
	--sn-info:          #1C1C1C;
	--sn-tip:           #2E7D32;
	--sn-warning:       #A07800;
	--sn-danger:        #C62828;

	/* Tints for callout backgrounds — washes on cream, not pastels on white */
	--sn-info-tint:     rgba(26, 26, 26, .05);
	--sn-tip-tint:      rgba(46, 125, 50, .08);
	--sn-warning-tint:  rgba(245, 216, 0, .22);
	--sn-danger-tint:   rgba(198, 40, 40, .07);
	--sn-primary-tint:  rgba(240, 96, 58, .12);

	/* Typography */
	--sn-font:         'Courier Prime', 'Courier New', ui-monospace, SFMono-Regular, Menlo, monospace;
	--sn-font-display: 'Fredoka', 'Trebuchet MS', -apple-system, sans-serif;
	--sn-fs-xs: .8125rem;  /* 13px meta */
	--sn-fs-sm: .875rem;   /* 14px small — monospace runs wide, so the whole
	                          scale sits a notch below a proportional one */
	--sn-fs-md: 1rem;      /* 16px body */
	--sn-fs-lg: 1.25rem;   /* 20px h3 */
	--sn-fs-xl: 1.75rem;   /* 28px h2 floor */
	--sn-fs-2xl: 3rem;     /* 48px h1 floor */
	--sn-lh-body: 1.7;
	--sn-lh-heading: 1;

	/* Spacing scale (multiples of 4) */
	--sn-sp-1: .25rem;  --sn-sp-2: .5rem;  --sn-sp-3: .75rem; --sn-sp-4: 1rem;
	--sn-sp-6: 1.5rem;  --sn-sp-8: 2rem;   --sn-sp-12: 3rem;  --sn-sp-16: 4rem;

	/* Shape. Rounded, but hard-edged: the shadow is a SOLID ink offset with
	   zero blur. Never introduce a blurred shadow or a gradient on this skin. */
	--sn-radius:      14px;   /* cards, panels, images */
	--sn-radius-sm:   8px;    /* small controls, chips */
	--sn-radius-pill: 100px;  /* buttons, badges, section labels */
	--sn-rule:        2px;    /* the standard ink frame width */
	--sn-shadow-sm:   3px 3px 0 var(--sn-heading);
	--sn-shadow:      4px 4px 0 var(--sn-heading);
	--sn-shadow-lg:   6px 6px 0 var(--sn-heading);
	--sn-glow:        none;

	/* Display stroke. -webkit-text-stroke draws centred, so paint-order puts
	   the stroke behind the fill and the letterform stays intact.
	   BOTH VALUES SCALE WITH THE TEXT, and that is the point: a flat 3px is
	   right on a 64px hero and turns a 20px block heading into a blob. The
	   em term does the scaling, the px floor keeps a small heading from
	   losing its outline entirely. */
	--sn-stroke-w:    max(1.4px, .045em);
	--sn-stroke-off:  max(2px, .06em);

	/* Layout */
	--sn-container:  1180px;
	--sn-content:    760px;   /* monospace measure: ~66 characters */
}