/*
 * EcomPL Design Tokens — ecomPL Design System (Claude Design output).
 *
 * THIS IS THE SINGLE SOURCE OF TRUTH.
 * Source: design-output/colors_and_type.css + README.md.
 * Green (#25b97d) is the PRIMARY brand color; blue is informational only.
 *
 * Legacy --epl-* aliases are kept stable so non-dashboard CSS files
 * (auth, settings, reports, etc.) re-skin without edits.
 */

/*
 * Self-hosted variable fonts (latin subset). No third-party round-trip, no
 * render-blocking @import. Served same-origin from the plugin — production-safe
 * on shared hosting. font-display:swap = text paints instantly in the fallback,
 * then swaps to the web font with no invisible-text (FOIT) gap.
 *
 * url() is relative to THIS file (assets/css/ -> ../fonts/). Both families are
 * variable fonts: one file covers every weight via the font-weight range.
 */
@font-face {
	font-family: "Plus Jakarta Sans";
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url("../fonts/plus-jakarta-sans-var.woff2") format("woff2");
}
@font-face {
	font-family: "JetBrains Mono";
	font-style: normal;
	font-weight: 400 600;
	font-display: swap;
	src: url("../fonts/jetbrains-mono-var.woff2") format("woff2");
}

:root {
	/* ── Brand green ────────────────────────────────────────────────────── */
	--brand-green:     #25b97d;
	--brand-green-600: #1fa46e;
	--brand-green-700: #178659;
	--brand-green-100: #d6f3e4;
	--brand-green-50:  #ecfaf2;

	/* ── Ink ────────────────────────────────────────────────────────────── */
	--ink:     #0d0d0d;
	--ink-900: #111418;
	--ink-800: #1a1f27;
	--ink-700: #232932;
	--ink-600: #2e353f;

	/* ── Neutrals ───────────────────────────────────────────────────────── */
	--gray-50:  #fafbfc;
	--gray-100: #f4f6f8;
	--gray-200: #e9ecf0;
	--gray-300: #d8dde4;
	--gray-400: #b3bac4;
	--gray-500: #6b7280;
	--gray-600: #4b5563;
	--gray-700: #374151;
	--gray-800: #1f2937;

	/* ── Semantic ───────────────────────────────────────────────────────── */
	--success:    #25b97d;
	--success-bg: #d6f3e4;
	--danger:     #e5484d;
	--danger-bg:  #fdecec;
	--warning:    #f5a524;
	--warning-bg: #fef4e0;
	--info:       #3b82f6;
	--info-bg:    #e8f1ff;

	/* ── Chart palette ──────────────────────────────────────────────────── */
	--chart-1: #25b97d;
	--chart-2: #3b82f6;
	--chart-3: #8b5cf6;
	--chart-4: #f59e0b;
	--chart-5: #ec4899;
	--chart-6: #06b6d4;
	--chart-7: #64748b;
	--chart-grid: #eef0f3;
	--chart-axis: #b3bac4;

	/* ── Surfaces / foreground ──────────────────────────────────────────── */
	--bg:               #ffffff;
	--bg-subtle:        #fafbfc;
	--surface:          #ffffff;
	--surface-2:        #f4f6f8;
	--surface-3:        #e9ecf0;
	--fg:               #0d0d0d;
	--fg-muted:         #6b7280;
	--fg-subtle:        #9aa3af;
	--fg-on-dark:       #ffffff;
	--fg-on-dark-muted: rgba(255, 255, 255, 0.62);
	--border:           #ebeef2;
	--border-strong:    #d8dde4;
	--border-on-dark:   rgba(255, 255, 255, 0.08);

	/* ── Typography ─────────────────────────────────────────────────────── */
	--font-sans:    "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
	--font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
	--font-display: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;

	--text-2xs: 11px; --text-xs: 12px; --text-sm: 13px; --text-base: 14px;
	--text-md: 15px;  --text-lg: 16px; --text-xl: 18px; --text-2xl: 22px;
	--text-3xl: 28px; --text-4xl: 36px; --text-5xl: 46px; --text-6xl: 60px;

	--leading-tight: 1.15; --leading-snug: 1.3;
	--leading-normal: 1.5; --leading-relaxed: 1.65;

	--tracking-tight: -0.02em; --tracking-snug: -0.01em;
	--tracking-wide: 0.04em;   --tracking-wider: 0.08em;

	/* ── Spacing (4px base) ─────────────────────────────────────────────── */
	--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; --space-20: 80px;

	/* ── Radii ──────────────────────────────────────────────────────────── */
	--radius-xs: 4px;  --radius-sm: 6px;  --radius-md: 8px;
	--radius-lg: 10px; --radius-xl: 12px; --radius-2xl: 16px; --radius-pill: 999px;

	/* ── Shadows ────────────────────────────────────────────────────────── */
	--shadow-xs:    0 1px 0 rgba(13, 13, 13, 0.04);
	--shadow-sm:    0 1px 2px rgba(13, 13, 13, 0.04), 0 1px 1px rgba(13, 13, 13, 0.03);
	--shadow-md:    0 4px 12px -2px rgba(13, 13, 13, 0.06), 0 2px 4px -1px rgba(13, 13, 13, 0.04);
	--shadow-lg:    0 16px 40px -12px rgba(13, 13, 13, 0.10), 0 4px 8px -2px rgba(13, 13, 13, 0.04);
	--shadow-focus: 0 0 0 3px rgba(37, 185, 125, 0.25);
	--ring:         inset 0 0 0 1px var(--border);
	--ring-strong:  inset 0 0 0 1px var(--border-strong);
	--ring-dark:    inset 0 0 0 1px var(--border-on-dark);

	/* ── Motion ─────────────────────────────────────────────────────────── */
	--ease-out:    cubic-bezier(0.22, 0.61, 0.36, 1);
	--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
	--duration-1:  120ms;
	--duration-2:  200ms;
	--duration-3:  320ms;

	/* ── Layout ─────────────────────────────────────────────────────────── */
	--sidebar-w:           248px;
	--sidebar-w-collapsed: 64px;
	--topbar-h:            56px;

	/* =====================================================================
	   LEGACY --epl-* ALIASES (mapped onto Claude tokens)
	   ===================================================================== */
	--epl-primary:        #25b97d;
	--epl-primary-600:    #1fa46e;
	--epl-primary-50:     #ecfaf2;
	--epl-secondary:      #25b97d;
	--epl-secondary-600:  #1fa46e;
	--epl-secondary-50:   #ecfaf2;

	--epl-bg:             #fafbfc;
	--epl-surface:        #ffffff;
	--epl-dark:           #0d0d0d;

	--epl-text:               #0d0d0d;
	--epl-text-secondary:     #6b7280;
	--epl-text-on-dark:       #ffffff;
	--epl-text-on-dark-muted: rgba(255, 255, 255, 0.62);
	--epl-text-on-primary:    #ffffff;
	--epl-text-muted:         #9aa3af;

	--epl-border:        #ebeef2;
	--epl-border-strong: #d8dde4;
	--epl-border-dark:   rgba(255, 255, 255, 0.08);
	--epl-border-subtle: #f1f3f5;
	--epl-bg-subtle:     #f4f6f8;

	--epl-success:      #25b97d;
	--epl-success-text: #178659;
	--epl-success-bg:   #d6f3e4;
	--epl-success-800:  #178659;
	--epl-danger:       #e5484d;
	--epl-danger-text:  #b32629;
	--epl-danger-bg:    #fdecec;
	--epl-danger-50:    #fff5f5;
	--epl-danger-100:   #fdecec;
	--epl-danger-300:   #f5c5c6;
	--epl-danger-600:   #cf3236;
	--epl-danger-800:   #991b1b;
	--epl-warning:      #f5a524;
	--epl-warning-text: #a16207;
	--epl-warning-bg:   #fef4e0;
	--epl-info:         #3b82f6;
	--epl-info-text:    #1e40af;
	--epl-info-bg:      #e8f1ff;

	--epl-input-bg:           #ffffff;
	--epl-sidebar-bg:         #0d0d0d;
	--epl-sidebar-text:       #ffffff;
	--epl-sidebar-text-muted: rgba(255, 255, 255, 0.4);
	--epl-hover:              #fafbfc;

	--epl-shadow-card:       inset 0 0 0 1px #ebeef2, 0 1px 2px rgba(13, 13, 13, 0.04);
	--epl-shadow-card-hover: inset 0 0 0 1px #d8dde4, 0 4px 12px -2px rgba(13, 13, 13, 0.06);

	--epl-radius-card:  12px;
	--epl-radius-pill:  999px;
	--epl-radius-input: 8px;

	--epl-font: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;

	--epl-btn-h-primary:   40px;
	--epl-btn-h-secondary: 40px;
	--epl-btn-h-ghost:     32px;

	--epl-focus-ring: 0 0 0 3px rgba(37, 185, 125, 0.25);

	--epl-hero-glow:
		radial-gradient(circle at 100% 0%, rgba(37, 185, 125, 0.22), transparent 70%),
		#0d0d0d;
	--epl-hero-glow-full:
		radial-gradient(circle at 100% 0%, rgba(37, 185, 125, 0.28), transparent 70%),
		#0d0d0d;
}