/**
 * WP Expertz — Design Tokens
 *
 * Single source of truth for every color, type-scale value, spacing value,
 * radius, shadow, breakpoint reference, container width, and transition
 * used anywhere in the theme. No other stylesheet should hard-code a raw
 * hex value, pixel spacing number, or font-family name — everything
 * references one of these custom properties.
 *
 * Palette: "Diagnostic Ink" (approved Phase 2, Section 2).
 */

:root {

	/* ---------------------------------------------------------------
	 * COLOR
	 * ------------------------------------------------------------- */
	--color-primary:         #122B4D; /* Ink navy — core brand color */
	--color-primary-dark:    #0B1B33; /* Deeper navy — dark sections, hover */
	--color-secondary:       #3E5A80; /* Muted steel-blue */
	--color-accent:          #0F766E; /* Controlled teal — primary CTA, "fixed" status */
	--color-accent-warning:  #B4740E; /* Amber — "diagnosing" status only */
	--color-error:           #B3261E; /* Red — "broken" status + form errors */
	--color-success:         #0F766E; /* Reuses accent teal — "fixed"/success */
	--color-info:            #3E5A80; /* Reuses secondary */

	--color-background:      #F7F8FA; /* Page background */
	--color-surface:         #FFFFFF; /* Card/panel background */
	--color-border:          #DDE2E8; /* Hairline border/divider */

	--color-text-primary:    #101826; /* Headings, body copy */
	--color-text-secondary:  #4B5768; /* Captions, metadata, supporting copy */
	--color-text-on-dark:    #FFFFFF; /* Text on primary/primary-dark backgrounds */

	/* ---------------------------------------------------------------
	 * TYPOGRAPHY
	 * ------------------------------------------------------------- */
	--font-display: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--font-body:    "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--font-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

	/* Desktop type scale */
	--text-h1-size: 52px;       --text-h1-line: 1.1;   --text-h1-weight: 600;
	--text-h2-size: 36px;       --text-h2-line: 1.2;   --text-h2-weight: 600;
	--text-h3-size: 26px;       --text-h3-line: 1.3;   --text-h3-weight: 600;
	--text-h4-size: 20px;       --text-h4-line: 1.4;   --text-h4-weight: 500;
	--text-body-lg-size: 19px;  --text-body-lg-line: 1.6;
	--text-body-size: 16px;     --text-body-line: 1.6;
	--text-body-sm-size: 14px;  --text-body-sm-line: 1.5;
	--text-caption-size: 13px;  --text-caption-line: 1.4;
	--text-button-size: 16px;   --text-button-line: 1.2;
	--text-nav-size: 15px;      --text-nav-line: 1.2;
	--text-mono-label-size: 13px; --text-mono-label-line: 1.4;

	/* Mobile type scale (applied via a breakpoint layer in base.css) */
	--text-h1-size-mobile: 34px;      --text-h1-line-mobile: 1.15;
	--text-h2-size-mobile: 26px;      --text-h2-line-mobile: 1.25;
	--text-h3-size-mobile: 21px;      --text-h3-line-mobile: 1.35;
	--text-h4-size-mobile: 18px;      --text-h4-line-mobile: 1.4;
	--text-body-lg-size-mobile: 17px; --text-body-lg-line-mobile: 1.55;
	--text-body-size-mobile: 16px;    --text-body-line-mobile: 1.55;
	--text-body-sm-size-mobile: 14px; --text-body-sm-line-mobile: 1.5;
	--text-caption-size-mobile: 12px; --text-caption-line-mobile: 1.4;
	--text-nav-size-mobile: 16px;     --text-nav-line-mobile: 1.2;

	/* ---------------------------------------------------------------
	 * SPACING (8px base scale)
	 * ------------------------------------------------------------- */
	--space-4:   4px;
	--space-8:   8px;
	--space-12:  12px;
	--space-16:  16px;
	--space-24:  24px;
	--space-32:  32px;
	--space-48:  48px;
	--space-64:  64px;
	--space-96:  96px;
	--space-128: 128px;

	/* Contextual spacing shortcuts referenced by later component CSS */
	--space-page-x-desktop: 64px;
	--space-page-x-tablet:  40px;
	--space-page-x-mobile:  20px;

	--space-section-y-desktop: 128px;
	--space-section-y-tablet:  96px;
	--space-section-y-mobile:  64px;

	--space-card-padding-desktop: 32px;
	--space-card-padding-tablet:  28px;
	--space-card-padding-mobile:  24px;

	--space-grid-gap-desktop: 24px;
	--space-grid-gap-tablet:  20px;
	--space-grid-gap-mobile:  16px;

	/* ---------------------------------------------------------------
	 * LAYOUT
	 * ------------------------------------------------------------- */
	--container-max:     1280px;
	--container-main:    1140px;
	--container-reading: 720px;

	--header-height-desktop: 80px;
	--header-height-tablet:  72px;
	--header-height-mobile:  64px;

	/* Breakpoints are referenced in comments for consistency; CSS custom
	   properties cannot be used inside @media queries directly, so the
	   actual pixel values below must match these when writing media
	   queries in base.css and later stylesheets. */
	/* mobile:  <768px */
	/* tablet:  768px–1199px */
	/* desktop: >=1200px */

	/* ---------------------------------------------------------------
	 * RADIUS
	 * ------------------------------------------------------------- */
	--radius-sm:   6px;  /* buttons, inputs */
	--radius-md:   8px;  /* cards */
	--radius-full: 50%;  /* icon buttons, circular elements */

	/* ---------------------------------------------------------------
	 * SHADOW
	 * ------------------------------------------------------------- */
	--shadow-card-hover: 0 1px 2px rgba(16, 24, 38, 0.04);
	--shadow-none: none;

	/* ---------------------------------------------------------------
	 * INTERACTION OVERLAYS (Phase 3B correction 1)
	 *
	 * Semantically distinct from brand colors and status colors above:
	 * these are translucent hover/active/focus overlays, always derived
	 * from an existing brand/status color via color-mix() rather than
	 * a separately hard-coded rgba() value — so there is exactly one
	 * source of truth per color (the base hex token), and an overlay
	 * can never silently drift out of sync with the color it's based on.
	 * ------------------------------------------------------------- */
	--overlay-primary-hover:  color-mix(in srgb, var(--color-primary) 8%, transparent);
	--overlay-primary-active: color-mix(in srgb, var(--color-primary) 12%, transparent);
	--overlay-on-dark-hover:  color-mix(in srgb, var(--color-text-on-dark) 10%, transparent);
	--focus-ring-accent:      color-mix(in srgb, var(--color-accent) 15%, transparent);
	--text-on-dark-secondary: color-mix(in srgb, var(--color-text-on-dark) 80%, transparent); /* supporting/secondary text on dark section backgrounds */

	/* ---------------------------------------------------------------
	 * TRANSITIONS
	 * ------------------------------------------------------------- */
	--transition-fast:   120ms ease; /* button state changes */
	--transition-base:   150ms ease; /* hover states */
	--transition-reveal: 300ms ease; /* scroll-reveal fade-up */
}