/* ────────────────────────────────────────────────────────────────
   GarmentFlow design tokens — THE single source of truth.

   Every surface consumes these:
     - Desk:        garmentflow_desk.css maps its scoped --gm-* vars
                    to these tokens (loaded via hooks.py app_include_css,
                    this file FIRST).
     - Micro-apps:  inlined into each app's CSS bundle via the
                    @import in shared/src/styles/main.css.
     - Portal:      portal.css/catalog.css migrate onto these tokens
                    (see design-prompt.md backlog).
     - Print:       print formats stay hardcoded grayscale by design;
                    the mapping is documented in design-prompt.md.

   Rules:
     - Change a color HERE, never inline in a page/component.
     - Pure variable definitions only — no selectors that style
       anything, no font @imports (fonts load in garmentflow_desk.css
       for Desk; apps use their tailwind stacks).
     - Dark mode = zinc neutrals, NEVER slate-blue. The dark block
       must cover every token the light block defines.
   ──────────────────────────────────────────────────────────────── */

:root {
	/* Surfaces */
	--gf-bg:            #ffffff;
	--gf-bg-subtle:     #f9fafb;
	--gf-bg-muted:      #f6f6f4;
	--gf-bg-hover:      #f6f6f4;

	/* Text */
	--gf-text:          #0a0a0b;
	--gf-text-strong:   #0a0a0b;
	--gf-text-muted:    #6b7280;
	--gf-text-faint:    #9ca3af;

	/* Borders */
	--gf-border:        #e5e7eb;
	--gf-border-light:  #f3f4f6;

	/* Brand accents */
	--gf-accent:        #2563eb;                      /* primary action (blue) */
	--gf-accent-soft:   rgba(37, 99, 235, 0.10);
	--gf-batch:         #ea580c;                      /* batch identity (orange) */
	--gf-batch-soft:    rgba(234, 88, 12, 0.10);
	--gf-group:         #7c3aed;                      /* group/secondary (violet) */
	--gf-group-soft:    rgba(124, 58, 237, 0.10);

	/* Status */
	--gf-success:       #059669;
	--gf-success-soft:  rgba(5, 150, 105, 0.10);
	--gf-warning:       #d97706;
	--gf-warning-soft:  rgba(217, 119, 6, 0.10);
	--gf-danger:        #dc2626;
	--gf-danger-soft:   rgba(220, 38, 38, 0.10);

	/* Elevation */
	--gf-shadow-sm:     0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 1px rgba(15, 23, 42, 0.04);
	--gf-shadow-md:     0 4px 14px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);

	/* Shape */
	--gf-radius-card:    12px;
	--gf-radius-control: 8px;
	--gf-radius-pill:    999px;

	/* Type stacks (families load per-surface; these are fallback-safe) */
	--gf-font-body:    "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Inter", sans-serif;
	--gf-font-display: "Fraunces", "Manrope", Georgia, serif;
	--gf-font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

/* Dark theme — zinc neutrals (NOT slate-blue). Covers Frappe Desk
   (html[data-theme='dark']) and the micro-apps (html.dark / body.dark). */
html[data-theme='dark'],
html.dark,
body.dark {
	--gf-bg:            #0a0a0b;
	--gf-bg-subtle:     #16161a;
	--gf-bg-muted:      #1f1f24;
	--gf-bg-hover:      rgba(255, 255, 255, 0.04);

	--gf-text:          #f4f4f5;
	--gf-text-strong:   #fafafa;
	--gf-text-muted:    #a1a1aa;
	--gf-text-faint:    #71717a;

	--gf-border:        #27272a;
	--gf-border-light:  #1c1c1f;

	--gf-accent:        #60a5fa;
	--gf-accent-soft:   rgba(96, 165, 250, 0.16);
	--gf-batch:         #fb923c;
	--gf-batch-soft:    rgba(251, 146, 60, 0.12);
	--gf-group:         #a78bfa;
	--gf-group-soft:    rgba(167, 139, 250, 0.14);

	--gf-success:       #34d399;
	--gf-success-soft:  rgba(52, 211, 153, 0.14);
	--gf-warning:       #fbbf24;
	--gf-warning-soft:  rgba(251, 191, 36, 0.14);
	--gf-danger:        #f87171;
	--gf-danger-soft:   rgba(248, 113, 113, 0.14);

	--gf-shadow-sm:     0 1px 2px rgba(0, 0, 0, 0.55), 0 1px 1px rgba(0, 0, 0, 0.35);
	--gf-shadow-md:     0 6px 22px rgba(0, 0, 0, 0.60), 0 2px 4px rgba(0, 0, 0, 0.40);
}