/* ============================================================================
   Wade's Plumbing & Septic — design tokens (single source of truth)
   ============================================================================

   Everything visual resolves through this file. Before it existed as a real
   system the theme carried three competing colour vocabularies at once:

     - Tailwind neutrals      text-gray-500/600/700/900
     - shadcn semantics       --foreground / --muted-foreground / --border
     - brand                  --color-primary / text-brand

   The shadcn half was cool blue-slate (#0f172a, #64748b, #f1f5f9, #e5e7eb)
   sitting underneath a warm copper brand, which is why no two sections looked
   related. That mismatch is the single largest source of the "nothing is
   consistent" problem, so the semantic layer is now warm and derived from the
   same ink/paper scale as everything else.

   Lane: warm paper. Cream canvas, warm-white paper, warm translucent borders,
   soft bevelled controls. Applied at marketing density, not app density.

   Every text/surface pair below was contrast-checked; the ratios in the
   comments are computed, not estimated. Tightest pair is 4.67:1.
   ========================================================================= */

:root {
	/* ── Brand ───────────────────────────────────────────────────────────────
	   Copper, darkened from #bc6f30 for WCAG AA. Authoritative: .bg-primary
	   and .text-primary both resolve here.
	   White on #8e5725 = 5.93:1. #8e5725 on paper = 5.84:1. */
	--wp--preset--color--primary: #8e5725;
	--wp--preset--color--primary-foreground: #ffffff;

	--brand-copper: #8e5725;
	--brand-copper-hover: #74461e;
	--brand-copper-soft: #f4e6d9;
	/* Lightened copper for dark surfaces — the brand value itself only reaches
	   3.2:1 on near-black, this reaches 8.46:1. */
	--brand-copper-on-dark: #d8a877;

	/* ── Surfaces ────────────────────────────────────────────────────────── */
	--ui-canvas: #f4efe6;        /* page/alternating band — replaces bg-gray-50 */
	--ui-paper: #fffdf9;         /* cards, panels — replaces bg-white          */
	--ui-paper-subtle: #faf5ec;
	--ui-paper-hover: #f5eee3;
	--ui-dark: #191512;          /* dark bands — warm, not pure black          */
	--ui-dark-raised: #221d19;

	/* ── Ink ─────────────────────────────────────────────────────────────────
	   on paper: ink 16.06:1 · secondary 8.01:1 · muted 5.62:1 */
	--ui-ink: #241f1b;
	--ui-ink-secondary: #574e45;
	--ui-ink-muted: #6e655b;
	/* on --ui-dark: 18.15:1 · 12.73:1 · 8.39:1 */
	--ui-ink-on-dark: #ffffff;
	--ui-ink-on-dark-secondary: #ded7cf;
	--ui-ink-on-dark-muted: #b8afa5;

	/* ── Borders — warm and translucent, never cool grey ─────────────────── */
	--ui-border-soft: rgba(67, 52, 38, 0.10);
	--ui-border: rgba(67, 52, 38, 0.16);
	--ui-border-edge: rgba(67, 52, 38, 0.24);
	--ui-border-on-dark: rgba(255, 255, 255, 0.14);

	/* ── Status ──────────────────────────────────────────────────────────── */
	--ui-success: #2f6144;
	--ui-success-soft: #e7f1e6;
	--ui-warning: #7a5417;
	--ui-warning-soft: #fdf0d5;
	--ui-danger: #97382e;
	--ui-danger-soft: #f9e3df;
	--ui-info: #3a616b;
	--ui-info-soft: #e4eff0;

	/* ── Radii — collapsed from the 10 values found in the templates ──────── */
	--radius-sm: 6px;
	--radius: 10px;      /* the default surface radius */
	--radius-lg: 14px;
	--radius-full: 9999px;

	/* ── Section rhythm — collapsed from 46 distinct combinations ─────────── */
	--section-y: 4.5rem;
	--section-y-lg: 6.5rem;
	--section-y-tight: 3rem;

	/* ── Motion ──────────────────────────────────────────────────────────── */
	--ease-out-strong: cubic-bezier(0.23, 1, 0.32, 1);
	--dur-fast: 140ms;
	--dur: 200ms;

	/* ── Shadows ─────────────────────────────────────────────────────────────
	   Control treatment is structurally Shopify Polaris's inset bevel, retuned
	   to warm neutrals. Paper lift is deliberately shallow: depth marks
	   meaning here, it is not decoration. */
	--shadow-control:
		inset 0 -1px 0 rgba(72, 56, 40, 0.28),
		inset 0 0 0 1px rgba(72, 56, 40, 0.10),
		inset 0 0.5px 0 1.5px rgba(255, 255, 255, 0.78),
		0 1px 1px rgba(72, 56, 40, 0.05);
	--shadow-control-hover:
		inset 0 -1px 0 rgba(72, 56, 40, 0.34),
		inset 0 0 0 1px rgba(72, 56, 40, 0.13),
		inset 0 1px 0 rgba(255, 255, 255, 0.88),
		0 1px 2px rgba(72, 56, 40, 0.07);
	--shadow-control-primary:
		inset 0 -1px 0 1px rgba(65, 31, 21, 0.55),
		inset 0 0 0 1px rgba(105, 49, 31, 0.90),
		inset 0 0.5px 0 1.5px rgba(255, 255, 255, 0.24),
		0 1px 2px rgba(72, 35, 24, 0.16);
	--shadow-paper:
		0 1px 0 rgba(67, 52, 38, 0.06),
		0 3px 8px -5px rgba(67, 52, 38, 0.20),
		inset 0 0.5px 0 rgba(255, 255, 255, 0.70);
	--shadow-paper-hover:
		0 1px 0 rgba(67, 52, 38, 0.08),
		0 8px 18px -10px rgba(67, 52, 38, 0.26),
		inset 0 0.5px 0 rgba(255, 255, 255, 0.78);
	--shadow-float:
		0 16px 40px -12px rgba(52, 40, 29, 0.28),
		0 4px 12px -4px rgba(52, 40, 29, 0.16),
		inset 0 0.5px 0 rgba(255, 255, 255, 0.72);

	/* ── shadcn/Tailwind semantic bridge ─────────────────────────────────────
	   These names are used across ~26 places in the templates. Rather than
	   rewrite every call site, they now resolve to the warm scale so the two
	   vocabularies stop disagreeing visually. */
	--background: var(--ui-paper);
	--foreground: var(--ui-ink);
	--card: var(--ui-paper);
	--card-foreground: var(--ui-ink);
	--popover: var(--ui-paper);
	--popover-foreground: var(--ui-ink);
	--secondary: var(--ui-paper-subtle);
	--secondary-foreground: var(--ui-ink);
	--muted: var(--ui-paper-subtle);
	--muted-foreground: var(--ui-ink-muted);
	--accent: var(--ui-paper-hover);
	--accent-foreground: var(--ui-ink);
	--destructive: var(--ui-danger);
	--destructive-foreground: #ffffff;
	--border: var(--ui-border);
	--input: var(--ui-border);
	--ring: var(--brand-copper);
	--radius: 10px;
}