/*
 * Tattoo Demo brand: Kyngo's monochrome language with Inkora's fonts.
 * Source and decisions: design/BRAND-NOTES.md (Luca, 2026-10-26: fully
 * monochrome, no gold; solid off-white Book button; Cinzel in this child only).
 *
 * Roles keep the parent's meaning: ink = the darkest surface (dark sheets,
 * header), paper = the lightest colour (text on dark, the primary button).
 * The whole site is dark, so the parent's light-surface components are
 * remapped in site.css; this file holds tokens and the heading face only.
 *
 * Ratios graded with dembrandt check_contrast (WCAG 2.1).
 * Fonts: self-hosted, OFL (licences in ../fonts/). Inter is the main family
 * via lw_config('font'); Cinzel (variable 400-900) is the heading face.
 */
@font-face { font-family: "Cinzel"; src: url("../fonts/cinzel-latin-wght-normal.woff2") format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; }

@layer brand {
	:root {
		color-scheme: dark; /* native controls, scrollbars and autofill match */

		/* Kyngo palette. */
		--td-black: #000000;        /* header, footer, dark sheets */
		--td-page: #0d0d0d;         /* page */
		--td-panel: #141414;        /* alternate sections, fields */
		--td-raised: #1a1a1a;       /* cards, tiles, hours box */
		--td-heading: #f2f2f2;      /* headings, frames, CTA fill: 17.36:1 on page, 18.76:1 on black */
		--td-body: #d2d2d2;         /* body text: 12.85:1 on page, 12.18:1 on panel, 11.51:1 on raised */
		--td-muted: #a8a8ad;        /* labels, captions: 8.21:1 page, 7.78:1 panel, 7.35:1 raised, 8.87:1 black */
		--td-line: #3a3a3a;         /* decorative dividers only (1.71:1); interactive borders use --td-heading */
		--td-field-border: #7a7a7a; /* 4.29:1 on field, 4.53:1 on page (>= 3:1 non-text) */

		/* Role tokens for the parent. */
		--color-ink: var(--td-black);
		--color-paper: var(--td-heading);
		--color-page: var(--td-page);
		--color-panel: var(--td-panel);
		--color-ink-raised: var(--td-raised);
		--color-accent: var(--td-heading);          /* white is the accent (Kyngo) */
		--color-accent-deep: var(--td-heading);     /* gradient stop: solid, no gradient */
		--color-accent-on-dark: var(--td-heading);
		--color-muted: var(--td-muted);             /* every surface is dark, so muted is light grey */
		--color-muted-on-dark: var(--td-muted);
		--color-line: var(--td-line);
		--color-field: var(--td-panel);
		--color-field-border: var(--td-field-border);
		--color-error: #ff9b8f;                     /* 8.54:1 on error-bg, 9.57:1 on page */
		--color-error-bg: #2b1411;
		--color-focus: var(--td-heading);           /* 17.36:1 on page */
		--color-focus-on-dark: var(--td-heading);

		/* Flat, square, no glow (Kyngo has none of the house glass or aurora). */
		--hairline-on-dark: 1px solid var(--td-line);
		--frame: 1px solid var(--td-heading);       /* Kyngo's light frames on boxes and the ghost button */
		--gradient-accent: linear-gradient(var(--td-heading), var(--td-heading));
		--border-gradient-card: linear-gradient(var(--td-line), var(--td-line));
		--shadow-card: none;
		--shadow-inner-glow: none;
		--nav-bg: var(--td-black);
		--nav-glass: rgb(0 0 0 / 0.82);
		--nav-rim: linear-gradient(var(--td-line), var(--td-line));
		--glow-1: transparent;
		--glow-2: transparent;
		--glow-3: transparent;

		/* Type: Cinzel headings, uppercase with Kyngo's wide tracking. Fluid,
		   mobile first (Kyngo's fixed 72px h1 wraps hard at 375px). */
		--font-heading: "Cinzel", Georgia, "Times New Roman", serif;
		--tracking-heading: 0.06em;
		--tracking-label: 0.14em;   /* nav, buttons, eyebrows (Kyngo +2px on ~12px) */
		--text-label: 0.8125rem;
		--text-h3: clamp(1.25rem, 1.12rem + 0.55vw, 1.625rem);
		--text-h2: clamp(1.75rem, 1.35rem + 1.7vw, 3rem);              /* 28 → 48 (Kyngo h2) */
		--text-display: clamp(2.25rem, 1.35rem + 3.8vw, 4.5rem);       /* 36 → 72 (Kyngo h1) */
		--leading-tight: 1.1;
		--leading-heading: 1.2;

		/* Square everything (Kyngo). Avatars set their own 50%. */
		--radius-sm: 0;
		--radius-md: 0;
		--radius-sheet: 0;
		--radius-pill: 0;
		--sheet-inset: 0px;         /* full-bleed sections */
	}
}
