/* ============================================
   FreshMart POS — Design Tokens & Theme Engine
   ============================================ */

/* ---------- FONTS ---------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root {
    /* ---- Typography ---- */
    --fm-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --fm-font-heading: 'Space Grotesk', 'Inter', sans-serif;
    --fm-font-mono: 'JetBrains Mono', 'Fira Code', monospace;

    /* ---- Sizing ---- */
    --fm-sidebar-width: 260px;
    --fm-sidebar-collapsed: 72px;
    --fm-topbar-height: 64px;
    --fm-radius-sm: 6px;
    --fm-radius-md: 10px;
    --fm-radius-lg: 16px;
    --fm-radius-xl: 24px;
    --fm-radius-full: 9999px;

    /* ---- Transitions ---- */
    --fm-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --fm-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --fm-duration-fast: 150ms;
    --fm-duration: 250ms;
    --fm-duration-slow: 400ms;

    /* ---- Z-index ---- */
    --fm-z-sidebar: 100;
    --fm-z-topbar: 110;
    --fm-z-modal: 200;
    --fm-z-toast: 300;
    --fm-z-tooltip: 250;

    /* ---- Shadows ---- */
    --fm-shadow-sm: 0 1px 3px rgba(0,0,0,0.12);
    --fm-shadow-md: 0 4px 12px rgba(0,0,0,0.15);
    --fm-shadow-lg: 0 8px 30px rgba(0,0,0,0.2);
    --fm-shadow-glow: 0 0 20px rgba(34,197,94,0.15);
}

/* =========== COLOR PROFILES =========== */

/* Fresh Green (Default) */
[data-profile="fresh-green"], :root {
    --fm-accent-h: 142;
    --fm-accent-s: 71%;
    --fm-accent-l: 45%;
    --fm-accent: hsl(var(--fm-accent-h), var(--fm-accent-s), var(--fm-accent-l));
    --fm-accent-hover: hsl(var(--fm-accent-h), var(--fm-accent-s), 38%);
    --fm-accent-light: hsl(var(--fm-accent-h), var(--fm-accent-s), 90%);
    --fm-accent-glow: hsla(var(--fm-accent-h), var(--fm-accent-s), var(--fm-accent-l), 0.25);
    --fm-gradient-accent: linear-gradient(135deg, hsl(142,71%,45%), hsl(160,64%,43%));
}

/* Ocean Blue */
[data-profile="ocean-blue"] {
    --fm-accent-h: 217;
    --fm-accent-s: 91%;
    --fm-accent-l: 60%;
    --fm-accent: hsl(217,91%,60%);
    --fm-accent-hover: hsl(217,91%,50%);
    --fm-accent-light: hsl(217,91%,92%);
    --fm-accent-glow: hsla(217,91%,60%,0.25);
    --fm-gradient-accent: linear-gradient(135deg, hsl(217,91%,60%), hsl(199,89%,48%));
}

/* Sunset Orange */
[data-profile="sunset-orange"] {
    --fm-accent-h: 25;
    --fm-accent-s: 95%;
    --fm-accent-l: 53%;
    --fm-accent: hsl(25,95%,53%);
    --fm-accent-hover: hsl(25,95%,45%);
    --fm-accent-light: hsl(25,95%,92%);
    --fm-accent-glow: hsla(25,95%,53%,0.25);
    --fm-gradient-accent: linear-gradient(135deg, hsl(25,95%,53%), hsl(40,96%,50%));
}

/* Royal Purple */
[data-profile="royal-purple"] {
    --fm-accent-h: 258;
    --fm-accent-s: 90%;
    --fm-accent-l: 66%;
    --fm-accent: hsl(258,90%,66%);
    --fm-accent-hover: hsl(258,90%,56%);
    --fm-accent-light: hsl(258,90%,92%);
    --fm-accent-glow: hsla(258,90%,66%,0.25);
    --fm-gradient-accent: linear-gradient(135deg, hsl(258,90%,66%), hsl(280,87%,60%));
}

/* =========== DARK THEME (Default) =========== */
[data-theme="dark"], :root {
    --fm-bg-body: #0f1117;
    --fm-bg-sidebar: #0a0d14;
    --fm-bg-topbar: rgba(15,17,23,0.85);
    --fm-bg-card: rgba(255,255,255,0.04);
    --fm-bg-card-hover: rgba(255,255,255,0.07);
    --fm-bg-input: rgba(255,255,255,0.06);
    --fm-bg-input-focus: rgba(255,255,255,0.09);
    --fm-bg-modal: rgba(20,22,30,0.95);
    --fm-bg-table-row-hover: rgba(255,255,255,0.04);
    --fm-bg-badge: rgba(255,255,255,0.08);

    --fm-text-primary: #f1f5f9;
    --fm-text-secondary: #94a3b8;
    --fm-text-muted: #64748b;
    --fm-text-inverse: #0f1117;

    --fm-border: rgba(255,255,255,0.06);
    --fm-border-hover: rgba(255,255,255,0.12);
    --fm-border-focus: var(--fm-accent);

    --fm-danger: #ef4444;
    --fm-danger-light: rgba(239,68,68,0.15);
    --fm-warning: #f59e0b;
    --fm-warning-light: rgba(245,158,11,0.15);
    --fm-success: #22c55e;
    --fm-success-light: rgba(34,197,94,0.15);
    --fm-info: #3b82f6;
    --fm-info-light: rgba(59,130,246,0.15);

    --fm-scrollbar-track: rgba(255,255,255,0.03);
    --fm-scrollbar-thumb: rgba(255,255,255,0.1);

    --fm-glass: rgba(255,255,255,0.04);
    --fm-glass-border: rgba(255,255,255,0.08);
    --fm-backdrop: blur(20px);
}

/* =========== LIGHT THEME =========== */
[data-theme="light"] {
    --fm-bg-body: #f5f7fa;
    --fm-bg-sidebar: #ffffff;
    --fm-bg-topbar: rgba(255,255,255,0.9);
    --fm-bg-card: #ffffff;
    --fm-bg-card-hover: #f8fafc;
    --fm-bg-input: #f1f5f9;
    --fm-bg-input-focus: #e2e8f0;
    --fm-bg-modal: rgba(255,255,255,0.98);
    --fm-bg-table-row-hover: #f8fafc;
    --fm-bg-badge: #f1f5f9;

    --fm-text-primary: #1e293b;
    --fm-text-secondary: #64748b;
    --fm-text-muted: #94a3b8;
    --fm-text-inverse: #ffffff;

    --fm-border: #e2e8f0;
    --fm-border-hover: #cbd5e1;
    --fm-border-focus: var(--fm-accent);

    --fm-danger: #dc2626;
    --fm-danger-light: rgba(220,38,38,0.1);
    --fm-warning: #d97706;
    --fm-warning-light: rgba(217,119,6,0.1);
    --fm-success: #16a34a;
    --fm-success-light: rgba(22,163,74,0.1);
    --fm-info: #2563eb;
    --fm-info-light: rgba(37,99,235,0.1);

    --fm-scrollbar-track: #f1f5f9;
    --fm-scrollbar-thumb: #cbd5e1;

    --fm-glass: rgba(255,255,255,0.7);
    --fm-glass-border: rgba(0,0,0,0.08);
    --fm-backdrop: blur(20px);

    --fm-shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
    --fm-shadow-md: 0 4px 12px rgba(0,0,0,0.08);
    --fm-shadow-lg: 0 8px 30px rgba(0,0,0,0.1);
    --fm-shadow-glow: 0 0 20px var(--fm-accent-glow);
}

/* ============ FINANCE COLOUR TOKENS ============ */
:root {
    --fm-credit:  var(--fm-success);
    --fm-debit:   var(--fm-danger);
    --fm-neutral: var(--fm-text-secondary);
    --fm-pending: var(--fm-warning);
}

.fm-credit  { color: var(--fm-credit);  }
.fm-credit::before  { content: '+ '; }
.fm-debit   { color: var(--fm-debit);   }
.fm-debit::before   { content: '− '; }
.fm-neutral { color: var(--fm-neutral); }
.fm-pending { color: var(--fm-pending); }

/* ============ CLICKABLE ROWS ============ */
tr[data-href] { cursor: pointer; }
tr[data-href]:hover { background: var(--fm-bg-card-hover, rgba(255,255,255,0.04)) !important; }