/* ============================================================================
   MONEY MAP — DESIGN TOKENS
   File: css/tokens.css
   Description: Central design system variables for the entire application.
   Every colour, font, spacing, shadow, and radius is defined here.
   Other CSS files reference these variables using var(--variable-name).
   ============================================================================ */


/* ============================================================================
   1. BRAND COLOURS
   These are the primary identity colours of Money Map.
   Teal/emerald conveys trust, growth, and financial stability.
   ============================================================================ */

:root {
    /* Primary brand colour — used for buttons, links, active states, focus rings */
    --brand-primary: #0d9488;
    --brand-primary-hover: #0f766e;
    --brand-primary-active: #115e59;
    --brand-primary-light: #ccfbf1;
    --brand-primary-lighter: #f0fdfa;

    /* Accent colour — used for secondary actions, highlights, information */
    --brand-accent: #0284c7;
    --brand-accent-hover: #0369a1;
    --brand-accent-light: #e0f2fe;

    /* Dark brand colour — used for headers, sidebar, strong emphasis */
    --brand-dark: #0f172a;
    --brand-dark-lighter: #1e293b;


    /* ========================================================================
       2. TEXT COLOURS
       Hierarchy of text colours for readability and visual weight.
       All meet WCAG AA contrast requirements against white backgrounds.
       ======================================================================== */

    /* Primary text — headings, important numbers, body text */
    --text-primary: #0f172a;

    /* Secondary text — subtitles, descriptions, labels */
    --text-secondary: #64748b;

    /* Muted text — placeholders, timestamps, less important info */
    --text-muted: #94a3b8;

    /* Inverse text — text on dark/coloured backgrounds */
    --text-inverse: #ffffff;

    /* Link text */
    --text-link: #0284c7;
    --text-link-hover: #0369a1;

    /* Financial text — specific colours for money values */
    --text-income: #166534;
    --text-expense: #991b1b;
    --text-neutral: #0f172a;


    /* ========================================================================
       3. BACKGROUND COLOURS
       Layered backgrounds for depth and visual separation.
       ======================================================================== */

    /* Main page background — the overall canvas */
    --bg-main: #f8fafc;

    /* Surface background — cards, panels, content areas */
    --bg-surface: #ffffff;

    /* Elevated background — modals, dropdowns, popovers */
    --bg-elevated: #ffffff;

    /* Input background — form fields, search boxes */
    --bg-input: #f1f5f9;
    --bg-input-focus: #ffffff;

    /* Hover background — subtle highlight on interactive rows/items */
    --bg-hover: #f1f5f9;

    /* Active/selected background */
    --bg-active: #e2e8f0;

    /* Overlay background — behind modals */
    --bg-overlay: rgba(15, 23, 42, 0.5);


    /* ========================================================================
       4. BORDER COLOURS
       ======================================================================== */

    --border-default: #e2e8f0;
    --border-light: #f1f5f9;
    --border-dark: #cbd5e1;
    --border-focus: var(--brand-primary);
    --border-error: #ef4444;
    --border-success: #22c55e;


    /* ========================================================================
       5. STATUS COLOURS
       Used for badges, alerts, validation messages, and indicators.
       Each status has a background (light) and text (dark) variant.
       ======================================================================== */

    /* Success — positive outcomes, completed actions, income */
    --status-success-bg: #dcfce7;
    --status-success-text: #166534;
    --status-success-border: #86efac;
    --status-success-icon: #22c55e;

    /* Warning — caution, approaching limits, pending items */
    --status-warning-bg: #fef3c7;
    --status-warning-text: #92400e;
    --status-warning-border: #fcd34d;
    --status-warning-icon: #f59e0b;

    /* Error/Danger — problems, failures, expenses, overdue items */
    --status-error-bg: #fee2e2;
    --status-error-text: #991b1b;
    --status-error-border: #fca5a5;
    --status-error-icon: #ef4444;

    /* Info — neutral information, tips, guidance */
    --status-info-bg: #e0f2fe;
    --status-info-text: #075985;
    --status-info-border: #7dd3fc;
    --status-info-icon: #0ea5e9;


    /* ========================================================================
       6. TYPOGRAPHY
       Font stack, sizes, weights, and line heights.
       Inter is the primary font — clean, highly legible, modern.
       Falls back to system fonts if Inter is not loaded.
       ======================================================================== */

    --font-family: 'Inter', 'Plus Jakarta Sans', system-ui, -apple-system,
                   'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

    /* Monospace font for numbers and financial figures */
    --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', 'Consolas',
                 'Liberation Mono', monospace;

    /* Font sizes — based on a 16px base (1rem = 16px) */
    --font-size-2xs: 0.625rem;   /* 10px — tiny labels, badges */
    --font-size-xs: 0.75rem;     /* 12px — small labels, captions */
    --font-size-sm: 0.875rem;    /* 14px — secondary text, form labels */
    --font-size-base: 1rem;      /* 16px — body text, default */
    --font-size-lg: 1.125rem;    /* 18px — slightly larger body */
    --font-size-xl: 1.25rem;     /* 20px — small headings */
    --font-size-2xl: 1.5rem;     /* 24px — section headings */
    --font-size-3xl: 1.875rem;   /* 30px — page headings */
    --font-size-4xl: 2.25rem;    /* 36px — hero numbers, dashboard totals */
    --font-size-5xl: 3rem;       /* 48px — large hero display */

    /* Font weights */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;

    /* Line heights */
    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;

    /* Letter spacing */
    --letter-spacing-tight: -0.025em;
    --letter-spacing-normal: 0;
    --letter-spacing-wide: 0.025em;
    --letter-spacing-wider: 0.05em;


    /* ========================================================================
       7. SPACING
       Consistent spacing scale used for margins, padding, and gaps.
       Based on a 4px base unit for precise alignment.
       ======================================================================== */

    --space-0: 0;
    --space-1: 4px;      /* 0.25rem */
    --space-2: 8px;      /* 0.5rem */
    --space-3: 12px;     /* 0.75rem */
    --space-4: 16px;     /* 1rem — default spacing */
    --space-5: 20px;     /* 1.25rem */
    --space-6: 24px;     /* 1.5rem */
    --space-8: 32px;     /* 2rem */
    --space-10: 40px;    /* 2.5rem */
    --space-12: 48px;    /* 3rem */
    --space-16: 64px;    /* 4rem */
    --space-20: 80px;    /* 5rem */

    /* Semantic spacing aliases for common use cases */
    --space-xs: var(--space-1);
    --space-sm: var(--space-2);
    --space-md: var(--space-4);
    --space-lg: var(--space-6);
    --space-xl: var(--space-8);
    --space-2xl: var(--space-12);


    /* ========================================================================
       8. BORDER RADIUS
       Controls the roundness of corners on cards, buttons, inputs, etc.
       ======================================================================== */

    --radius-none: 0;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 24px;
    --radius-full: 9999px;  /* Fully rounded — pills, avatars, badges */


    /* ========================================================================
       9. SHADOWS
       Layered shadows for depth. Subtle and professional, not dramatic.
       ======================================================================== */

    --shadow-none: none;
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.03);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.03);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.03);
    --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04);
    --shadow-xl: 0 8px 32px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.06);

    /* Focus shadow — used with focus rings */
    --shadow-focus: 0 0 0 3px rgba(13, 148, 136, 0.3);

    /* Inner shadow — for pressed/inset states */
    --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.06);


    /* ========================================================================
       10. TRANSITIONS & ANIMATIONS
       Standard timing for smooth, professional interactions.
       ======================================================================== */

    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 350ms ease;
    --transition-spring: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Toast notification slide-in */
    --transition-slide: 300ms cubic-bezier(0.16, 1, 0.3, 1);


    /* ========================================================================
       11. Z-INDEX LAYERS
       Controls stacking order of overlapping elements.
       Higher numbers appear on top.
       ======================================================================== */

    --z-base: 1;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-overlay: 300;
    --z-modal: 400;
    --z-toast: 500;
    --z-tooltip: 600;


    /* ========================================================================
       12. LAYOUT DIMENSIONS
       Maximum widths and sizing for containers and components.
       ======================================================================== */

    /* Maximum content width for readability */
    --max-width-sm: 640px;
    --max-width-md: 768px;
    --max-width-lg: 1024px;
    --max-width-xl: 1280px;

    /* Sidebar width (desktop) */
    --sidebar-width: 260px;
    --sidebar-collapsed-width: 72px;

    /* Bottom navigation height (mobile) */
    --bottom-nav-height: 64px;

    /* Header height */
    --header-height: 60px;

    /* Minimum touch target (WCAG / mobile usability) */
    --touch-target: 44px;

    /* Card minimum width for responsive grids */
    --card-min-width: 280px;


    /* ========================================================================
       13. RESPONSIVE BREAKPOINTS (reference only)
       CSS custom properties cannot be used in @media queries, so these
       are documented here for reference. Use the pixel values directly
       in media queries in other CSS files.
       
       Mobile:  up to 639px   (base styles — no media query needed)
       Tablet:  640px to 1023px  (@media min-width: 640px)
       Desktop: 1024px and above  (@media min-width: 1024px)
       Wide:    1280px and above  (@media min-width: 1280px)
       ======================================================================== */


    /* ========================================================================
       14. CURRENCY FORMATTING REFERENCE
       Not CSS variables, but documented here for consistency.
       
       Default currency: NGN (Nigerian Naira)
       Symbol: ₦
       Format: ₦1,234,567.89
       Thousands separator: comma (,)
       Decimal separator: dot (.)
       Decimal places: 2 (or 0 for whole naira amounts)
       
       The actual formatting is handled by JavaScript (js/utils.js).
       ======================================================================== */
}


/* ============================================================================
   15. DARK MODE TOKENS (Future Enhancement)
   These are placeholder tokens for a future dark mode. They are NOT active
   in V1 but are documented here so the transition is straightforward later.
   To activate: add data-theme="dark" to the <html> element.
   ============================================================================ */

/*
[data-theme="dark"] {
    --text-primary: #f1f5f9;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    --bg-main: #0f172a;
    --bg-surface: #1e293b;
    --bg-elevated: #334155;
    --bg-input: #1e293b;
    --border-default: #334155;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.3);
}
*/