/**
 * Dakhli — design tokens.
 *
 * "Atelier": the visual language of a professional trade supplier. Warm paper
 * ground, near-black structure, and the client's yellow spent sparingly so it
 * still means something when it appears. Depth comes from hairlines and flat
 * planes rather than drop shadows, which is what keeps it reading as drawn
 * rather than generated.
 *
 * Every value below is referenced by token elsewhere — no raw hex or bare px in
 * the component sheets.
 */

:root {
	/* ---------------------------------------------------------------
	 * Colour
	 * ------------------------------------------------------------- */

	/* Brand yellow. 627 is the client's; the darker steps are for hover and
	   for text on light grounds, where the pure yellow fails contrast. */
	--dk-yellow: #ffc627;
	--dk-yellow-600: #e8a200;
	--dk-yellow-700: #b87f00;
	--dk-yellow-100: #fff2cc;
	--dk-yellow-050: #fffaeb;

	/* Ink. Very slightly blue so it reads as considered rather than default. */
	--dk-ink: #12141a;
	--dk-ink-800: #1c1f27;
	--dk-ink-700: #2a2e38;
	--dk-ink-600: #424957;
	--dk-ink-500: #5a616e;
	--dk-ink-400: #868c98;
	--dk-ink-300: #b4b8c1;

	/* Paper. Warm off-white — a cool grey would drift toward generic SaaS. */
	--dk-paper: #faf8f3;
	--dk-paper-2: #f2efe7;
	--dk-paper-3: #e9e5d9;
	--dk-white: #ffffff;

	/* Hairlines. The primary means of separation in this system. */
	--dk-line: #e4e0d6;
	--dk-line-strong: #cdc8b9;
	--dk-line-ink: rgba(255, 255, 255, 0.14);

	/* Status. Red is reserved for promotions and errors only. */
	--dk-red: #c8321e;
	--dk-red-tint: #fdecea;
	--dk-green: #2f7d4f;
	--dk-green-tint: #eaf5ee;
	--dk-blue: #1f5f8b;

	/* Semantic aliases — components should reach for these first. */
	--dk-bg: var(--dk-paper);
	--dk-bg-raised: var(--dk-white);
	--dk-bg-sunken: var(--dk-paper-2);
	--dk-text: var(--dk-ink);
	--dk-text-muted: var(--dk-ink-500);
	--dk-text-faint: var(--dk-ink-400);
	--dk-accent: var(--dk-yellow);
	--dk-accent-ink: var(--dk-ink);

	/* ---------------------------------------------------------------
	 * Type
	 * ------------------------------------------------------------- */

	--dk-font-display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
	--dk-font-sans: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--dk-font-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', monospace;

	/* Body scale. Fixed rather than fluid — body copy that resizes with the
	   viewport hurts readability more than it helps. */
	--dk-t-2xs: 0.6875rem;  /* 11px — mono micro-labels */
	--dk-t-xs: 0.75rem;     /* 12px */
	--dk-t-sm: 0.8125rem;   /* 13px */
	--dk-t-base: 0.9375rem; /* 15px */
	--dk-t-md: 1.0625rem;   /* 17px — lead paragraphs */
	--dk-t-lg: 1.1875rem;   /* 19px */

	/* Display scale. Fluid, because headlines genuinely should shrink on
	   phones. Ratio is roughly 1.25 at the small end, 1.32 at the large. */
	--dk-d-xs: clamp(1.0625rem, 0.99rem + 0.36vw, 1.25rem);
	--dk-d-sm: clamp(1.25rem, 1.14rem + 0.55vw, 1.5rem);
	--dk-d-md: clamp(1.5rem, 1.31rem + 0.95vw, 2rem);
	--dk-d-lg: clamp(1.875rem, 1.53rem + 1.73vw, 2.75rem);
	--dk-d-xl: clamp(2.375rem, 1.77rem + 3.02vw, 4rem);
	--dk-d-2xl: clamp(2.875rem, 1.87rem + 5.02vw, 5.5rem);

	--dk-lh-tight: 0.96;
	--dk-lh-snug: 1.15;
	--dk-lh-body: 1.6;
	--dk-lh-relaxed: 1.75;

	/* Condensed display wants negative tracking; mono labels want a lot of
	   positive tracking. Both are what make the pairing look deliberate. */
	--dk-ls-display: -0.015em;
	--dk-ls-tight: -0.01em;
	--dk-ls-label: 0.18em;
	--dk-ls-wide: 0.32em;

	/* ---------------------------------------------------------------
	 * Space — 4px base
	 * ------------------------------------------------------------- */

	--dk-s1: 0.25rem;
	--dk-s2: 0.5rem;
	--dk-s3: 0.75rem;
	--dk-s4: 1rem;
	--dk-s5: 1.5rem;
	--dk-s6: 2rem;
	--dk-s7: 2.5rem;
	--dk-s8: 3rem;
	--dk-s9: 4rem;
	--dk-s10: 5rem;
	--dk-s11: 6.5rem;
	--dk-s12: 8rem;

	/* Vertical rhythm between major page sections. */
	--dk-section: clamp(3rem, 2rem + 5vw, 6rem);
	--dk-section-lg: clamp(4rem, 2.5rem + 7.5vw, 8rem);

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

	--dk-container: 1320px;
	--dk-container-narrow: 820px;
	--dk-gutter: clamp(1rem, 0.5rem + 2.2vw, 2.5rem);
	--dk-header-h: 76px;
	--dk-topbar-h: 38px;

	/* ---------------------------------------------------------------
	 * Form
	 * ------------------------------------------------------------- */

	/* Near-square. Rounded corners are the fastest way to make an industrial
	   brand look like a generic template. */
	--dk-radius: 2px;
	--dk-radius-md: 3px;
	--dk-radius-pill: 999px;

	--dk-border: 1px solid var(--dk-line);
	--dk-border-strong: 1px solid var(--dk-line-strong);
	--dk-border-ink: 1.5px solid var(--dk-ink);

	/* Used only for genuinely floating layers (dropdowns, drawers, modals).
	   Flat surfaces get a hairline instead. */
	--dk-shadow-pop: 0 1px 2px rgba(18, 20, 26, 0.06), 0 12px 28px -8px rgba(18, 20, 26, 0.18);
	--dk-shadow-drawer: 0 0 0 100vmax rgba(18, 20, 26, 0.42);

	--dk-ring: 0 0 0 3px rgba(255, 198, 39, 0.45);

	--dk-ease: cubic-bezier(0.2, 0, 0.1, 1);
	--dk-dur: 160ms;
	--dk-dur-slow: 320ms;

	--dk-z-header: 100;
	--dk-z-dropdown: 200;
	--dk-z-drawer: 300;
	--dk-z-modal: 400;

	/* ---------------------------------------------------------------
	 * Atelier texture
	 * ------------------------------------------------------------- */

	/* Faint engineering-paper grid. Applied to large flat areas at low
	   opacity — present enough to feel like drafting paper, never enough to
	   compete with content. */
	--dk-grid-size: 26px;
	--dk-grid-line: rgba(18, 20, 26, 0.045);
	--dk-grid-line-ink: rgba(255, 255, 255, 0.055);
}