/* ============================================================
   Lazuli Management — tokens.css
   Canonical source of truth per inputs/design-system/design-system.md
   (dated 2026-05-15). 1 rem = 16 px at browser default. Do not change
   html font-size.

   ORDERING:
   1. Canonical tokens (forward-looking; all new authoring uses these)
   2. Legacy bridge aliases (existing templates + CSS keep rendering)

   Both layers live on :root so the cascade resolves cleanly. If you
   need to change a brand value, edit the canonical declaration ONLY.
   The legacy bridge references the canonical, so a single edit
   propagates everywhere.
   ============================================================ */

:root {
	/* ── COLOR — BRAND ─────────────────────────────────────── */
	--yellow:           #FED55D;
	--yellow-soft:      #FFEAAE;
	--yellow-hover:     #FFE085;
	--yellow-deep:      #BFA046;   /* decorative only — fails AA on paper */
	--yellow-ink:       #7F6A2F;

	--navy:             #205A83;
	--navy-deep:        #184362;
	--navy-ink:         #102D41;
	--navy-soft:        #8FACC1;

	--surface-dark-1:   #0A1721;   /* footer */
	--surface-dark-2:   #0D1F2D;   /* bold direction body */

	/* ── COLOR — SURFACE ───────────────────────────────────── */
	--white:            #FFFFFF;
	--paper:            #FBF9F4;
	--paper-2:          #F4F0E6;
	--bone:             #EAE4D5;
	--bone-deep:        #D8CFB9;

	/* ── COLOR — TEXT ──────────────────────────────────────── */
	--ink:              #102D41;
	--ink-2:            #1C3D57;
	--muted:            #5B6E7C;
	--muted-2:          #6F7E8A;   /* WCAG-corrected from #8A98A3 */

	/* ── COLOR — SEMANTIC ──────────────────────────────────── */
	--success:          #4ADE80;
	--success-fg:       #A7F3C2;
	--success-bg:       rgba(74, 222, 128, 0.12);
	--error:            #E5484D;

	/* ── COLOR — LINES ─────────────────────────────────────── */
	--line:             rgba(16, 45, 65, 0.12);
	--line-strong:      rgba(16, 45, 65, 0.22);
	--line-dark:        rgba(255, 255, 255, 0.16);
	--line-dark-soft:   rgba(255, 255, 255, 0.08);

	/* ── TYPE — FAMILIES ───────────────────────────────────── */
	--font-body:        "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--font-display:     "Inter Tight", "Inter", sans-serif;
	--font-mono:        ui-monospace, "JetBrains Mono", Menlo, monospace;

	/* ── TYPE — SIZE (Major Third, anchored at 1rem = 16px) ── */
	--text-xs:          0.75rem;    /*  12 px — eyebrow, micro labels */
	--text-sm:          0.875rem;   /*  14 px — meta, captions */
	--text-base:        1rem;       /*  16 px — body */
	--text-lg:          1.25rem;    /*  20 px — lead, hero subhead */
	--text-xl:          1.5rem;     /*  24 px — h3 small */
	--text-2xl:         2rem;       /*  32 px — h3 / article h2 */
	--text-3xl:         2.5rem;     /*  40 px — h2 compact, blog title mobile */
	--text-4xl:         3rem;       /*  48 px — h2 default */
	--text-5xl:         4rem;       /*  64 px — h2 large, blog title desktop */
	--text-6xl:         5rem;       /*  80 px — h1 service hero */
	--text-7xl:         6rem;       /*  96 px — h1 homepage */
	--text-8xl:         7.5rem;     /* 120 px — bold variant h1 */

	/* Eyebrow alias (per OQ-9). Component specs reference --font-eyebrow. */
	--font-eyebrow:     var(--text-xs);

	/* ── TYPE — WEIGHT / LEADING / TRACKING ────────────────── */
	--leading-tight:    0.98;
	--leading-snug:     1.1;
	--leading-normal:   1.5;
	--leading-relaxed:  1.65;       /* body, article paragraphs */
	--tracking-tighter: -0.03em;
	--tracking-tight:   -0.02em;
	--tracking-normal:  0;
	--tracking-wide:    0.04em;
	--tracking-eyebrow: 0.16em;

	/* ── SPACING — 4px grid in rem (1rem = 16px) ───────────── */
	--space-0:          0;
	--space-1:          0.25rem;    /*   4 px */
	--space-2:          0.5rem;     /*   8 px */
	--space-3:          0.75rem;    /*  12 px */
	--space-4:          1rem;       /*  16 px */
	--space-5:          1.5rem;     /*  24 px */
	--space-6:          2rem;       /*  32 px */
	--space-7:          2.5rem;     /*  40 px */
	--space-8:          3rem;       /*  48 px */
	--space-9:          4rem;       /*  64 px */
	--space-10:         5rem;       /*  80 px */
	--space-11:         6rem;       /*  96 px */
	--space-12:         7.5rem;     /* 120 px */
	--space-13:         10rem;      /* 160 px */

	/* ── RADII — px (visual primitives) ────────────────────── */
	--radius-xs:        6px;
	--radius-sm:        8px;
	--radius-md:        12px;
	--radius-lg:        16px;
	--radius-card:      18px;
	--radius-card-lg:   24px;
	--radius-pill:      9999px;
	--radius-circle:    50%;

	/* ── BORDERS — px ──────────────────────────────────────── */
	--border-hairline:  1px solid var(--line);
	--border-strong:    1px solid var(--line-strong);
	--border-dark:      1px solid var(--line-dark);

	/* ── FOCUS RING (WCAG 2.2 SC 2.4.7 & 2.4.13) ───────────── */
	--focus-ring:       0 0 0 3px var(--yellow), 0 0 0 5px var(--navy-ink);

	/* ── SHADOWS ───────────────────────────────────────────── */
	--shadow-card:      0 30px 60px -30px rgba(16, 45, 65, 0.35);
	--shadow-hover:     0 24px 48px -28px rgba(16, 45, 65, 0.25);
	--shadow-floating:  0 18px 40px -20px rgba(16, 45, 65, 0.45);
	--shadow-badge:     0 20px 40px -20px rgba(0, 0, 0, 0.35);
	--shadow-avatar:    0 6px 14px -6px rgba(16, 45, 65, 0.30);
	--shadow-step:      0 8px 20px -10px rgba(16, 45, 65, 0.35);

	/* ── MOTION ────────────────────────────────────────────── */
	--ease-base:        cubic-bezier(0.2, 0.7, 0.2, 1);
	--ease-emphasized:  cubic-bezier(0.22, 0.61, 0.36, 1);
	--duration-fast:    200ms;
	--duration-base:    350ms;
	--duration-slow:    900ms;

	/* ── LAYOUT ────────────────────────────────────────────── */
	--container-max:    1280px;
	--container-narrow: 760px;
	--gutter:           clamp(1.25rem, 4vw, 4rem);  /* 20 – 64 px */

	/* ── BREAKPOINTS — informational only; media queries hard-code values */
	--bp-sm:            640px;
	--bp-md:            768px;
	--bp-lg:            1024px;
	--bp-xl:            1280px;
	--bp-2xl:           1536px;

	/* ────────────────────────────────────────────────────────
	   LEGACY BRIDGE
	   Aliases so existing assets/css/lazuli-management.css,
	   block patterns, and Elementor widgets that reference the
	   theme.json-generated --wp--preset--color--* and
	   --wp--custom--color--semantic--* names keep rendering.
	   Every legacy variable resolves to the canonical token.
	   Future authoring uses the canonical names directly.
	   ──────────────────────────────────────────────────────── */

	/* Neutral ramp */
	--wp--preset--color--neutral-0:    var(--white);
	--wp--preset--color--neutral-1000: #000000;

	/* Gold ramp (legacy) → canonical yellow */
	--wp--preset--color--gold-100:     var(--yellow-soft);
	--wp--preset--color--gold-500:     var(--yellow);
	--wp--preset--color--gold-700:     var(--yellow-deep);
	--wp--preset--color--gold-900:     var(--yellow-ink);

	/* Blue ramp (legacy) → canonical navy */
	--wp--preset--color--blue-300:     var(--navy-soft);
	--wp--preset--color--blue-500:     var(--navy);
	--wp--preset--color--blue-700:     var(--navy-deep);
	--wp--preset--color--blue-900:     var(--navy-ink);

	/* Feedback (legacy) → canonical. Per OQ-1, success and error get the
	   bright canonical values; warning has no canonical equivalent and is
	   retained as-is via theme.json (no alias needed). */
	--wp--preset--color--feedback-success-500: var(--success);
	--wp--preset--color--feedback-error-500:   var(--error);
}