/**
 * Design Tokens — Tukumaaq
 *
 * Single source of truth for all design decisions not covered by theme.json.
 * Colors and font sizes live in theme.json (they power the block editor palette).
 * Everything else lives here.
 *
 * Usage: var(--tk-*)
 * Prefix: --tk (tukumaaq) to avoid collisions with WP variables
 */

:root {

	/* ── Color aliases (values live in theme.json) ───────────────────────────── */

	--tk-color-navy:       var(--wp--preset--color--dark-navy);    /* #092D3A */
	--tk-color-teal:       var(--wp--preset--color--deep-teal);    /* #115E83 */
	--tk-color-sky:        var(--wp--preset--color--sky-blue);     /* #6ECCE0 */
	--tk-color-tan:        var(--wp--preset--color--warm-tan);     /* #A8916A */
	--tk-color-yellow:     var(--wp--preset--color--soft-yellow);  /* #F7DE79 */
	--tk-color-grey:       var(--wp--preset--color--grey);         /* #888A8A */
	--tk-color-text:       var(--wp--preset--color--text-color);   /* #1A1A1A */
	--tk-color-white:      var(--wp--preset--color--white);        /* #FFFFFF */
	--tk-color-banner-bg:  var(--wp--preset--color--dark-navy);     /* navy — announcement bar */


	/* ── Font size aliases (values live in theme.json) ──────────────────────── */

	--tk-size-xs:          var(--wp--preset--font-size--small);      /* 0.875rem */
	--tk-size-body:        var(--wp--preset--font-size--medium);     /* 1rem     */
	--tk-size-body-lg:     var(--wp--preset--font-size--large);      /* 1.15rem  */
	--tk-size-h6:          var(--wp--preset--font-size--medium);     /* 1rem     */
	--tk-size-h5:          var(--wp--preset--font-size--x-large);    /* 1.2rem   */
	--tk-size-h4:          var(--wp--preset--font-size--xx-large);   /* 1.44rem  */
	--tk-size-h3:          var(--wp--preset--font-size--xxx-large);  /* 1.728rem */
	--tk-size-h2:          var(--wp--preset--font-size--huge);       /* 2.074rem */
	--tk-size-h1:          var(--wp--preset--font-size--gigantic);   /* 2.488rem */
	--tk-size-btn:         1.125rem;                                  /* 18px — button label */


	/* ── Font family aliases (values live in theme.json) ────────────────────── */

	--tk-font-heading:     var(--wp--preset--font-family--ilisarniq);  /* Ilisarniq */
	--tk-font-body:        var(--wp--preset--font-family--ilisarniq-body);  /* Ilisarniq */


	/* ── Typography ─────────────────────────────────────────────────────────── */

	--tk-fw-body:     400;
	--tk-fw-heading:  900;

	--tk-lh-tight:    1.2;  /* h1, h2 */
	--tk-lh-mid:      1.3;  /* h3, h4 */
	--tk-lh-loose:    1.4;  /* h5, h6 */
	--tk-lh-body:     1.75; /* body, paragraphs */


	/* ── Spacing ─────────────────────────────────────────────────────────────── */

	--tk-space-xs:    0.5rem;   /*  8px */
	--tk-space-sm:    1rem;     /* 16px */
	--tk-space-md:    1.5rem;   /* 24px */
	--tk-space-lg:    2.5rem;   /* 40px */
	--tk-space-xl:    4rem;     /* 64px */
	--tk-space-xxl:   6rem;     /* 96px */


	/* ── Internal rhythm — consistent gaps within patterns ───────────────────── */

	--tk-gap-tight:   0.5rem;   /*  8px — heading → paragraph, subtitle → heading */
	--tk-gap-normal:  0.75rem;  /* 12px — icon → label, icon → heading */
	--tk-gap-wide:    2rem;     /* 32px — image → heading (hotel cards) */
	--tk-gap-section: 2.5rem;   /* 40px — section header → content */


	/* ── Border Radius ───────────────────────────────────────────────────────── */

	--tk-radius-sm:   4px;
	--tk-radius-md:   12px;
	--tk-radius-lg:   24px;
	--tk-radius-pill: 100px;  /* buttons */


	/* ── Transitions ─────────────────────────────────────────────────────────── */

	--tk-transition-fast: 150ms ease;
	--tk-transition-base: 250ms ease;
	--tk-transition-slow: 400ms ease;


	/* ── Shadows ─────────────────────────────────────────────────────────────── */

	--tk-shadow-sm:  0 2px 8px rgba(9, 45, 58, 0.08);
	--tk-shadow-md:  0 4px 20px rgba(9, 45, 58, 0.12);
	--tk-shadow-lg:  0 8px 40px rgba(9, 45, 58, 0.16);


	/* ── Z-index ─────────────────────────────────────────────────────────────── */

	--tk-z-base:    1;
	--tk-z-overlay: 100;
	--tk-z-modal:   200;
	--tk-z-header:  300;

}