/**
 * Design tokens — Sabeh Creation Brand System.
 *
 * Single source of truth for the editorial visual language: a restrained
 * neutral palette (paper / ink / one warm accent), a serif+sans type
 * pairing for editorial contrast, and a generous spacing scale that
 * supports the "spacious, image-focused" direction. Brand colors are
 * overridable live from the Customizer (see inc/customizer.php) which
 * writes the same custom-property names inline — code stays the source
 * of truth for defaults, the client can nudge the palette without a dev.
 */

:root {

	/* ---- Color: neutral base ---- */
	--color-paper: #FAF8F5;      /* primary background */
	--color-paper-alt: #F1EEE8;  /* secondary surface, footer, cards */
	--color-ink: #161311;        /* primary text */
	--color-ink-muted: #6B655D;  /* secondary text, meta */
	--color-line: #E5E0D8;       /* hairlines, borders, dividers */
	--color-accent: #8A6D4B;     /* brand accent — CTAs, active states */
	--color-accent-ink: #FFFFFF; /* text on accent */

	/* ---- Color: semantic ---- */
	--color-success: #4B6B4E;
	--color-error: #A6432E;

	/* ---- Typography ---- */
	/* Editorial serif for display/headings, restrained grotesk for UI/body.
	   Self-host or swap to a licensed brand typeface later — these are the
	   system-safe interim stack so the theme works before webfonts land. */
	--font-display: 'Canela', 'Georgia', 'Times New Roman', serif;
	--font-body: 'Suisse Intl', 'Helvetica Neue', Arial, sans-serif;

	--fs-2xs: 0.75rem;   /* 12px — labels, badges */
	--fs-xs: 0.8125rem;  /* 13px — meta, eyebrow */
	--fs-sm: 0.9375rem;  /* 15px — small body */
	--fs-base: 1rem;     /* 16px — body */
	--fs-md: 1.125rem;   /* 18px */
	--fs-lg: 1.5rem;     /* 24px */
	--fs-xl: 2rem;       /* 32px */
	--fs-2xl: 2.75rem;   /* 44px */
	--fs-3xl: 3.75rem;   /* 60px — hero display */

	--lh-tight: 1.1;
	--lh-snug: 1.3;
	--lh-normal: 1.6;

	--ls-eyebrow: 0.12em; /* letter-spacing for small caps/eyebrow labels */
	--ls-tight: -0.01em;  /* headings */

	/* Font weights — the interim system stacks (Georgia/Helvetica) only
	   render reliably at these two; keep the scale narrow so a future
	   webfont swap (Canela/Suisse Intl) doesn't need new call sites. */
	--fw-regular: 400;
	--fw-medium: 500;
	--fw-semibold: 600;

	/* ---- Spacing scale ---- */
	--space-3xs: 0.25rem;
	--space-2xs: 0.5rem;
	--space-xs: 0.75rem;
	--space-sm: 1rem;
	--space-md: 1.5rem;
	--space-lg: 2.5rem;
	--space-xl: 4rem;
	--space-2xl: 6rem;
	--space-3xl: 9rem;

	/* ---- Layout ---- */
	--container-max: 1440px;      /* standard content max-width */
	--container-wide-max: 1800px; /* large-desktop / ultrawide ceiling, full-bleed-adjacent sections */
	--container-narrow-max: 760px;
	--container-gutter: 1.25rem;     /* mobile */
	--container-gutter-md: 2rem;     /* tablet+ */
	--container-gutter-lg: 3rem;     /* desktop+ */
	--radius-sm: 2px; /* near-zero radius — sharp, editorial, not "app-like" */

	/* ---- Borders ---- */
	--border-width: 1px;   /* hairlines, inputs, card edges */
	--border-width-md: 2px; /* emphasis rules, active/selected states */

	/* ---- Image / media ratios ----
	   Named, not numbered, so a template picks intent ("portrait product
	   shot") rather than a raw fraction. Applied via .ratio-* utilities
	   in components.css; kept in sync with inc/setup.php add_image_size(). */
	--ratio-square: 1 / 1;
	--ratio-portrait: 4 / 5;
	--ratio-landscape: 16 / 9;
	--ratio-wide: 21 / 9;
	--ratio-hero: 16 / 9;

	/* ---- Motion ---- */
	--ease: cubic-bezier(0.4, 0, 0.2, 1);
	--duration-fast: 150ms;
	--duration-base: 250ms;

	/* ---- Z-index scale ---- */
	--z-header: 100;
	--z-nav-mobile: 110;
	--z-overlay: 120;
}

/* ---- Breakpoints (referenced in comments; CSS custom properties can't
   hold media query values, so these are documented here as the single
   source of truth for every file in this folder to match). ----
   --bp-sm:  480px  — large phone
   --bp-md:  768px  — tablet
   --bp-lg:  1024px — small desktop / tablet landscape
   --bp-xl:  1280px — desktop
   --bp-2xl: 1600px — large desktop
   Mobile-first throughout: base rules target the smallest viewport,
   each breakpoint above adds/overrides via min-width. Nothing in this
   system introduces horizontal scroll — containers, grids and media are
   all constrained to 100% of their parent (see layout.css overflow note).
*/