/* ===================================================================
   LedgerIQ Design Tokens — Single Source of Truth
   Every module CSS imports this file. No module should define its own
   font, colour, shadow, or spacing tokens.
   =================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700;800&family=DM+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
    /* ── Typography ── */
    --liq-font-display: 'Fraunces', 'Playfair Display', Georgia, serif;
    --liq-font-body: 'DM Sans', system-ui, -apple-system, sans-serif;
    --liq-font-mono: 'JetBrains Mono', 'Fira Code', monospace;

    /* ── Backgrounds ── */
    --liq-bg: #faf8f5;
    --liq-surface: #FFFFFF;

    /* ── Borders ── */
    --liq-border: #d4d0c8;
    --liq-border-light: #E7E5E4;
    --liq-border-lighter: #F5F5F4;

    /* ── Text ── */
    --liq-text: #1C1917;
    --liq-text-secondary: #57534E;
    --liq-text-muted: #A8A29E;

    /* ── Semantic Colours ── */
    --liq-accent: #4a9080;
    --liq-accent-light: rgba(74, 144, 128, 0.08);
    --liq-profit: #047857;
    --liq-profit-light: #D1FAE5;
    --liq-loss: #BE123C;
    --liq-loss-light: #FFE4E6;
    --liq-warning: #CA8A04;
    --liq-warning-light: #FEF3C7;
    --liq-info: #1E40AF;
    --liq-info-light: rgba(30, 64, 175, 0.08);

    /* ── Shadows ── */
    --liq-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
    --liq-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.06);
    --liq-shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.12);

    /* ── Hero (dark slate) ── */
    --liq-hero-from: #0F172A;
    --liq-hero-via: #1E293B;
    --liq-hero-to: #283548;

    /* ── Spacing ── */
    --liq-module-padding-x: 1.75rem;
    --liq-module-padding-y: 1.25rem;
    --liq-card-padding: 1rem 1.125rem;
    --liq-card-radius: 10px;
    --liq-section-gap: 1.25rem;

    /* ── Transitions ── */
    --liq-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --liq-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);

    /* ── Legacy aliases (for modules still using old var names) ── */
    --font-sans-serif: var(--liq-font-body);
    --font-mono: var(--liq-font-mono);
    --font-display: var(--liq-font-display);
    --font-body: var(--liq-font-body);
    --text-color: var(--liq-text);
    --text-muted: var(--liq-text-muted);
    --text-secondary: var(--liq-text-secondary);
    --surface-color: var(--liq-surface);
    --border-color: var(--liq-border);
    --bg-color: var(--liq-bg);
}

/* ── Shared Micro-Interactions ── */

/* Standard module entry animation */
@keyframes liqFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Staggered entry — apply via JS: style="animation-delay: calc(var(--i, 0) * 60ms)" */
@keyframes liqSlideUp {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Button press effect */
button:active:not(:disabled),
.btn:active:not(:disabled) {
    transform: scale(0.98);
}

/* Focus ring for accessibility */
:focus-visible {
    outline: 2px solid var(--liq-accent);
    outline-offset: 2px;
}

/* ── Shared Card Hover Lift ── */
/* Apply .liq-lift to any card for consistent hover behaviour */
.liq-lift {
    transition: box-shadow 0.2s var(--liq-ease), transform 0.2s var(--liq-ease);
}
.liq-lift:hover {
    box-shadow: var(--liq-shadow-md);
    transform: translateY(-1px);
}

/* ── Shared Table Row Hover ── */
/* Tables inside modules get subtle teal tint on row hover */
.liq-table tbody tr {
    transition: background 0.12s ease;
}
.liq-table tbody tr:hover td {
    background: var(--liq-accent-light);
}