/* ============================================================
   DESIGN TOKENS — the single source of truth for the scales and
   the brand palette.

   WorkGrid renders through two shells: inc/header.php (the classic
   pages, <html data-theme="dark">) and inc/dashboard_shell_top.php
   (the dashboards, <html class="dark">). They load different
   stylesheets, so anything defined only in style.css was invisible
   to the dashboards, which had to restate ~20 of these values as
   literal var() fallbacks. Two copies of a scale drift.

   Everything here is theme-independent — a spacing step, a type or
   icon size, a radius, a duration, a brand hue. The semantic
   colours that DO change with the theme (--text-primary, --bg-card
   and friends) stay in style.css under [data-theme], because the
   two shells still disagree on how a theme is selected.

   Load this FIRST, before any other stylesheet.
   ============================================================ */

:root {
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-6: 1.5rem;
	--space-8: 3rem;
	--space-12: 3rem;
	--font-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
	--font-display: 'Outfit', var(--font-sans);
	--font-mono: 'JetBrains Mono', ui-monospace, monospace;

	/* Type scale. Every font-size in the app is one of these steps; sizes used
	   to be picked ad hoc and ran to thirty-odd values between 0.65 and 2.25rem
	   with no relationship between them. */
	--fs-2xs: 0.6875rem;
	--fs-xs: 0.75rem;
	--fs-sm: 0.8125rem;
	--fs-md: 0.875rem;
	--fs-base: 1rem;
	--fs-lg: 1.125rem;
	--fs-xl: 1.375rem;
	--fs-2xl: 1.75rem;
	--fs-3xl: 2.25rem;

	/* Icon scale, matched to where icons appear:
	   sm   inside pills, badges and dense table controls
	   md   beside text — notes, links, the sidebar
	   lg   buttons
	   xl   standing on its own, and every field's trailing icon
	   2xl  the large decorative marks in empty states and drop zones

	   xl is 24px because that is what lucide renders when nothing sizes an
	   icon, which is most of them. Naming it makes the default deliberate
	   rather than inherited from the library. */
	--icon-sm: 14px;
	--icon-md: 16px;
	--icon-lg: 18px;
	--icon-xl: 24px;
	--icon-2xl: 40px;
	--radius-sm: 6px;
	--radius-md: 8px;
	--radius-lg: 12px;
	--radius-xl: 16px;
	--radius-full: 9999px;
	--transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
	--transition-slow: 400ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* ============================================================
   BRAND PALETTE — sampled from assets/images/Empireone logo.png
     #7F3FFC  purple  : left of the E1 mark + the "CX" wordmark  (PRIMARY)
     #1C63F8  blue    : right of the E1 mark + the "One" wordmark (SECONDARY)
     var(--brand-indigo)  indigo  : the midpoint the logo gradient passes through
     var(--brand-navy)  navy    : the "Empire" wordmark
   Buttons and other primary surfaces use --brand-gradient, which is the
   logo's own purple -> blue sweep.
   ============================================================ */
:root {
	--brand-purple: #7F3FFC;
	--brand-blue: #1C63F8;
	--brand-indigo: #574EFA;
	--brand-navy: #09085F;

	--brand-purple-light: #9D6BFF;
	--brand-blue-light: #4C8DFF;
	--brand-purple-deep: #5B21D6;

	--brand-purple-rgb: 127, 63, 252;
	--brand-blue-rgb: 28, 99, 248;
	--brand-indigo-rgb: 87, 78, 250;

	--brand-gradient: linear-gradient(135deg, #7F3FFC 0%, var(--brand-indigo) 50%, #1C63F8 100%);

	/* Legacy aliases: older rules still reference these names. */
	--brand-cyan: var(--brand-blue-light);
	--brand-violet: var(--brand-indigo);
	--brand-orange: var(--brand-purple);
	--brand-gold: var(--brand-blue);

	/* Status colours carry meaning, not brand — they stay independent. */
	--status-success: #22C55E;
	--status-warning: #F59E0B;
	--status-danger: #EF4444;
}