/*
 * THE DESIGN TOKENS (Aitio plan v2, Appendix A).
 *
 * EASY WORDING: this is the single recipe book for the look of the site.
 * Colours, text sizes, layout widths and motion timing live here.
 * Change a value in this file and it changes on every page of the site.
 *
 * Nothing else in the theme is allowed to invent its own colours or speeds.
 */

:root {
	/* ------------------------------------------------------------------
	 * 1. Colours (exactly the tokens from plan v2)
	 * --------------------------------------------------------------- */
	--aitio-yellow: #ffff05;      /* highlights, bands, buttons, online dot */
	--aitio-dark: #151515;        /* dark sections (contact, footer, script) */
	--aitio-black: #000000;       /* text on light pages, black buttons */
	--aitio-white: #f9f9f9;       /* light bands, text on dark */
	--aitio-pure-white: #ffffff;  /* the page itself, logos on project covers */
	--aitio-page: #ffffff;        /* the page background (the design) */
	--aitio-muted: #c3c3c3;       /* the quiet text on the dark band (intro, consent) */
	--aitio-beige: #ebebdf;       /* beige sections (team cards etc.) */
	--aitio-brown: #4a1b11;       /* warm dark project card sections */

	/* The admin screens (same plan; the softer ink was darkened for
	 * WCAG AA contrast so small grey text stays readable). */
	--aitio-canvas: #efebe1;
	--aitio-ink-admin: #6b695f;

	/* ------------------------------------------------------------------
	 * 2. Friendly aliases (older templates use these names; they now
	 *    simply point at the new colours so nothing breaks)
	 * --------------------------------------------------------------- */
	--aitio-ink: var(--aitio-black);
	--aitio-ink-soft: #3f3d38;
	--aitio-ink-faint: var(--aitio-ink-admin);
	--aitio-paper: var(--aitio-white);
	--aitio-cream: var(--aitio-beige);
	--aitio-cream-deep: #e2e1d3;
	--aitio-line: #e4e3d8;
	--aitio-yellow-soft: rgba(255, 255, 5, 0.4);

	/* ------------------------------------------------------------------
	 * 3. Fonts (self-hosted; files live in /assets/fonts/)
	 *    See assets/fonts/README.md for what to drop in.
	 * --------------------------------------------------------------- */
	--aitio-font: "Neue Montreal", "Helvetica Neue", Arial, sans-serif;
	--aitio-font-body: var(--aitio-font);
	--aitio-font-display: "Alte Haas Grotesk", "Arial Black", Impact, sans-serif;

	/* ------------------------------------------------------------------
	 * 4. Type scale (plan v2: desktop 1440 -> mobile 402, fluid between)
	 *    Example: H1 is 72px on desktop and 42px on mobile.
	 * --------------------------------------------------------------- */
	--aitio-h1: clamp(42px, 2.89vw + 30.4px, 72px);
	--aitio-h2: clamp(32px, 1.64vw + 25.4px, 49px);
	--aitio-h3: clamp(28px, 0.77vw + 24.9px, 36px);
	--aitio-h4: clamp(24px, 0.77vw + 20.9px, 32px);
	--aitio-h5: clamp(22px, 0.19vw + 21.2px, 24px);
	--aitio-h6: 20px;
	--aitio-body-l: 18px;
	--aitio-body-m: 16px;
	--aitio-body-s: 14px;
	--aitio-overline: 12px;
	--aitio-btn-text: 12px;

	/* ------------------------------------------------------------------
	 * 5. Layout
	 * --------------------------------------------------------------- */
	--aitio-design: 1440px;
	--aitio-content: 1280px;
	--aitio-container: calc(var(--aitio-content) + 2 * var(--aitio-gutter));
	--aitio-panel: 280px;         /* the sticky right panel width */
	--aitio-panel-gap: 16px;      /* gap between content and panel */
	--aitio-col-panel: min(1064px, calc(100vw - var(--aitio-panel) - var(--aitio-panel-gap) - var(--aitio-gutter)));
	--aitio-card-sidebar: 217px;  /* width of every sidebar card */
	--aitio-col-3: 413px;         /* blog grid card */
	--aitio-gutter: clamp(20px, 5.56vw, 80px);

	/* ------------------------------------------------------------------
	 * 6. Shape
	 * --------------------------------------------------------------- */
	--aitio-radius: 16px;
	--aitio-radius-sm: 10px;
	--aitio-radius-card: 5px;     /* sidebar cards + small pieces */

	/* ------------------------------------------------------------------
	 * 7. Motion (plan v2, chapter 8). One easing, three durations.
	 * --------------------------------------------------------------- */
	--ease: cubic-bezier(0.22, 1, 0.36, 1);
	--fast: 200ms;   /* hover and small state changes */
	--base: 400ms;   /* cards, open/close, docking */
	--slow: 700ms;   /* large reveals */
	--aitio-ease: var(--ease); /* older code uses this name */
}

@media (min-width: 721px) and (max-width: 1024px) {
	:root {
		--aitio-gutter: 30px;
	}
}

@media (min-width: 1441px) {
	:root {
		--aitio-container: 1280px;
		--aitio-col-panel: 984px;
		--aitio-gutter: 0px;
	}
}