/*
 * F! Orders — Shared Design Tokens
 *
 * Added 2026-07-11. One canonical set of CSS custom properties for every
 * front-end/admin stylesheet in this plugin (fo-dashboard.css, fo-profile.css,
 * fo-admin.css) to build on, instead of each file hand-declaring its own copy
 * of the same colors/radius/shadow values — which had drifted out of sync
 * (fo-dashboard.css and fo-profile.css disagreed on --fo-text and
 * --fo-radius-lg; fo-admin.css didn't use variables at all and repeated raw
 * hex literals dozens of times).
 *
 * Scoped to :root deliberately, not a wrapper class. That's safe here even
 * though this plugin's component CSS is normally scoped to .fo-dashboard-wrap
 * / .fo-vendor-profile to avoid touching the host theme's actual styles —
 * custom property NAMES don't render anything by themselves, they only take
 * effect where something explicitly writes var(--fo-...), and no WordPress
 * theme is going to coincidentally use these exact plugin-prefixed names.
 * Declaring them once on :root, instead of duplicating the same block inside
 * every wrapper class, is what actually lets one edit here update every
 * consumer at once.
 *
 * Anything genuinely context-specific stays out of this file and lives where
 * it's used instead — the dashboard's theme-detected accent color
 * (--fo-accent, set per-request in FO_Assets::enqueue_frontend()) and the
 * public profile's per-vendor accent/font/banner overrides
 * (--fo-accent, --fo-font-heading, --fo-font-body, set inline per vendor in
 * templates/default/vendor-profile.php) are not shared defaults, so they're
 * not defined here.
 *
 * @package FrickingOrders
 * @since   1.0.40
 */

:root {
	/* ── Brand ─────────────────────────────────────────────────────────
	   Shared fallback only. The dashboard overrides this via --fo-accent
	   (theme-detected or admin-set) and the profile page overrides it
	   per-vendor via its own --fo-accent — both layer on top of this,
	   they don't replace it as a concept. */
	--fo-primary:        #1d4ed8;
	--fo-primary-hover:  #1e40af;

	/* ── Text ──────────────────────────────────────────────────────────
	   For UI chrome (buttons, labels, tables, badges) only. Body copy and
	   headings inherit the host theme's own color via `inherit` /
	   `currentColor` — these tokens are never applied to prose. */
	--fo-text:           #111827;
	--fo-body:           #374151;
	--fo-muted:          #6b7280;
	--fo-subtle:         #9ca3af;

	/* ── Surfaces & borders ────────────────────────────────────────────── */
	--fo-surface:        #ffffff;
	--fo-bg:             #f9fafb;
	--fo-bg-inset:       #f3f4f6;
	--fo-border:         #e5e7eb;
	--fo-border-strong:  #c3c4c7;
	/* Deliberately a separate, slightly darker gray from --fo-border —
	   used specifically for form input borders (text fields, selects,
	   textareas) across all three stylesheets, never for cards/tables. */
	--fo-input-border:   #d1d5db;

	/* ── Semantic (status colors) ──────────────────────────────────────── */
	--fo-success:        #16a34a;
	--fo-success-bg:     #ecfdf5;
	--fo-success-text:   #065f46;
	--fo-warning:        #d97706;
	--fo-warning-bg:     #fffbeb;
	--fo-warning-text:   #92400e;
	--fo-danger:         #dc2626;
	--fo-danger-bg:      #fef2f2;
	--fo-danger-text:    #991b1b;
	--fo-info:           #2563eb;
	--fo-info-bg:        #eff6ff;
	--fo-info-text:      #1e40af;

	/* Focus ring — shares --fo-info's blue but needs an alpha channel,
	   which can't be derived from a hex var() without a color-mix()
	   fallback story we don't need yet, so it's its own token. */
	--fo-focus-ring:     rgba(37,99,235,.15);

	/* ── Shape ─────────────────────────────────────────────────────────── */
	--fo-radius:         6px;
	--fo-radius-lg:      8px;
	--fo-radius-pill:    999px;
	--fo-shadow:         0 1px 3px rgba(0,0,0,.08);
	--fo-shadow-lg:      0 20px 40px rgba(0,0,0,.15);

	/* ── Spacing scale ─────────────────────────────────────────────────
	   Reach for these instead of a new one-off px value when laying out
	   or re-laying-out a screen — the point of a scale is that future
	   element reconfiguration reuses the same handful of gaps rather than
	   inventing new numbers each time. */
	--fo-space-1: 4px;
	--fo-space-2: 8px;
	--fo-space-3: 12px;
	--fo-space-4: 16px;
	--fo-space-5: 20px;
	--fo-space-6: 24px;
	--fo-space-8: 32px;

	/* ── Type scale (UI chrome only — see note under Text above) ───────── */
	--fo-text-xs:   11px;
	--fo-text-sm:   12px;
	--fo-text-base: 13px;
	--fo-text-md:   14px;
	--fo-text-lg:   15px;
	--fo-text-xl:   18px;
	--fo-text-2xl:  20px;
	--fo-text-3xl:  28px;
}