/* ==========================================================================
   GatsToGo shared design tokens
   ==========================================================================
   One canonical token vocabulary, loaded before every surface's own
   stylesheet (customer-home.css, owner-admin.css, terminal.css, base.css).
   Before this file, each of those four defined its own independent
   :root -- same concepts (muted text, danger red, a border color), four
   different names and four slightly different hex values. This is the
   single source of truth those should draw from instead.

   Each surface's own CSS draws its actual colors/typography from its
   own :root (a deliberately independent, non-tenant palette per
   surface -- see each stylesheet's own header comment) -- what's
   unified here is the underlying scale those choices are built from
   (spacing, radius, motion), not the palette itself.

   Corner radius: all four surfaces (customer pages, owner/admin,
   terminal, marketing) use the same small, restrained --radius-sm/-md/
   -full below consistently -- not a per-surface sharp-vs-soft split.
   That split existed earlier in this app's life (customer pages
   started "soft," owner/admin/terminal started zero-radius "sharp");
   both were normalized onto this one shared, gentle radius after
   direct user feedback that all-sharp corners read as too "techy" for
   a business selling gas, not software.
   ========================================================================== */

:root {
	/* ---- Color: neutrals ---- */
	--color-ink: #0F172A;          /* primary text */
	--color-ink-soft: #334155;     /* secondary text on light surfaces */
	--color-muted: #64748B;        /* tertiary / label text */
	--color-faint: #94A3B8;        /* placeholder-level text, disabled */
	--color-border: #E2E8F0;       /* default border */
	--color-border-soft: #F1F5F9;  /* hairline / divider */
	--color-surface: #FFFFFF;      /* card/panel background */
	--color-surface-muted: #F8FAFC;
	--color-bg: #F4F6F8;           /* page background */

	/* ---- Color: brand (GatsToGo's own -- the internal/ops surfaces'
	   fixed identity; customer-facing pages override with the tenant's
	   own PrimaryColor/SecondaryColor/ButtonColor instead, deliberately,
	   see this file's header comment) ---- */
	--color-brand: #006B4D;
	--color-brand-hover: #00553D;
	--color-brand-tint: #E7F6F1;
	--color-brand-subtle: #F3FAF7;
	--color-brand-text-on: #F8FAFC; /* text color for content placed on --color-brand */
	--color-accent: #10B981;        /* the mint/emerald secondary accent already used across all three live surfaces */

	/* ---- Color: semantic status (shared across every surface) ---- */
	--color-success: #16A34A;
	--color-success-bg: #F0FDF4;
	--color-success-text: #166534;
	--color-warning: #F59E0B;
	--color-warning-bg: #FFFBEB;
	--color-warning-text: #92400E;
	--color-danger: #DC2626;
	--color-danger-bg: #FEF2F2;
	--color-danger-text: #B91C1C;
	--color-info: #2563EB;
	--color-info-bg: #EFF6FF;
	--color-info-text: #1D4ED8;

	/* ---- Color: dark surfaces (owner/admin rail, terminal header) ---- */
	--color-dark: #101820;
	--color-dark-raised: #1B2229;
	--color-dark-border: #303941;
	--color-dark-text: #F8FAFC;
	--color-dark-text-muted: #C9D2DA;

	/* ---- Typography ----
	   Archivo (display/headings) + IBM Plex Sans (body/UI) + IBM Plex Mono
	   (numeric/data) -- the pairing already established on the owner/admin
	   and terminal surfaces. Extending it everywhere rather than
	   introducing a third font system for the customer-facing pages,
	   which previously used a bare system-font stack with nothing loaded
	   for Archivo/IBM Plex at all. */
	--font-display: Archivo, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--font-body: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

	--text-2xs: 11px;
	--text-xs: 12px;
	--text-sm: 13px;
	--text-base: 15px;
	--text-md: 17px;
	--text-lg: 20px;
	--text-xl: 24px;
	--text-2xl: 28px;
	--text-3xl: 34px;
	--text-4xl: clamp(28px, 4vw, 42px);

	/* ---- Spacing scale (4px base unit) ---- */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 20px;
	--space-6: 24px;
	--space-8: 32px;
	--space-10: 40px;
	--space-12: 48px;
	--space-16: 64px;

	/* ---- Radius -- small and restrained, used consistently across
	   every surface (buttons, tags, form fields, small icon squares).
	   Hairline dividers and hairline-bordered layout structure (the
	   zero-"card" system every surface's own CSS documents) stay
	   unrounded -- radius is for discrete controls, not structural
	   lines. ---- */
	--radius-sm: 6px;
	--radius-md: 8px;
	--radius-lg: 12px;
	--radius-full: 999px;

	/* ---- Shadow -- used sparingly by design (see design direction:
	   hierarchy and borders over heavy shadows). Two levels is enough. ---- */
	--shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
	--shadow-md: 0 16px 40px rgba(16, 24, 32, 0.08);

	/* ---- Motion -- subtle, functional only. Reduced to 0 for anyone
	   who's asked for it at the OS level. ---- */
	--duration-fast: 120ms;
	--duration-base: 180ms;
	--ease-standard: cubic-bezier(0.2, 0, 0, 1);
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--duration-fast: 0ms;
		--duration-base: 0ms;
	}
}

/* ---- Icons (see web/templates/components/icon.templ) ----
   1em square by default so an icon sits inline with text at whatever
   font-size its container already has, rather than needing its own size
   picked at every call site. stroke: none because Phosphor's "regular"
   weight icons are filled shapes, not stroked outlines -- fill alone
   (inherited via currentColor from icon.templ) is correct. */
.icon {
	width: 1em;
	height: 1em;
	flex: none;
	stroke: none;
	vertical-align: -0.125em;
}