/**
 * HOA Management System — Design Token System
 *
 * Single source of truth for all design values: colors, spacing, typography,
 * shadows, radii, transitions, and z-index scale.
 *
 * Rules:
 *  - ALL components must use token variables, never raw values
 *  - Semantic tokens (--bg-*, --text-*, --border-*) change per theme
 *  - Palette tokens (--color-*) are constant — use semantic tokens in components
 *  - Dark mode overrides ONLY semantic tokens via [data-theme="dark"]
 *  - Theme toggle: set data-theme="dark" on <html> element
 *
 * Usage:
 *   <link rel="stylesheet" href="css/tokens.css">   (load FIRST, before style.css)
 */

/* ═══════════════════════════════════════════════════════════════════════════
   COLOR PALETTE (constant — do not use directly in components)
═══════════════════════════════════════════════════════════════════════════ */
:root {
    /* Green — HOA brand primary */
    --color-green-50:  #ecfdf5;
    --color-green-100: #d1fae5;
    --color-green-200: #a7f3d0;
    --color-green-300: #6ee7b7;
    --color-green-400: #34d399;
    --color-green-500: #10b981;
    --color-green-600: #059669;
    --color-green-700: #065f46;
    --color-green-800: #064e3b;
    --color-green-900: #022c22;

    /* Slate — Neutral surfaces */
    --color-slate-50:  #f8fafc;
    --color-slate-100: #f1f5f9;
    --color-slate-200: #e2e8f0;
    --color-slate-300: #cbd5e1;
    --color-slate-400: #94a3b8;
    --color-slate-500: #64748b;
    --color-slate-600: #475569;
    --color-slate-700: #334155;
    --color-slate-800: #1e293b;
    --color-slate-850: #172033;
    --color-slate-900: #0f172a;
    --color-slate-950: #090e1a;

    /* Semantic feedback */
    --color-red-50:    #fef2f2;
    --color-red-400:   #f87171;
    --color-red-500:   #ef4444;
    --color-red-600:   #dc2626;
    --color-red-700:   #b91c1c;

    --color-amber-50:  #fffbeb;
    --color-amber-400: #fbbf24;
    --color-amber-500: #f59e0b;
    --color-amber-600: #d97706;
    --color-amber-700: #b45309;

    --color-blue-50:   #eff6ff;
    --color-blue-400:  #60a5fa;
    --color-blue-500:  #3b82f6;
    --color-blue-600:  #2563eb;
    --color-blue-700:  #1d4ed8;

    --color-white: #ffffff;
    --color-black: #000000;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SEMANTIC TOKENS — LIGHT MODE (default)
   These are the tokens all components must use.
═══════════════════════════════════════════════════════════════════════════ */
:root {
    /* ── Brand ────────────────────────────────────────────────────────── */
    --brand-primary:         var(--color-green-700);
    --brand-primary-hover:   var(--color-green-600);
    --brand-primary-active:  var(--color-green-800);
    --brand-primary-subtle:  var(--color-green-50);
    --brand-primary-border:  var(--color-green-200);
    --brand-on-primary:      var(--color-white);

    /* ── Backgrounds ──────────────────────────────────────────────────── */
    --bg-page:      var(--color-slate-100);   /* Page/body background      */
    --bg-surface:   var(--color-white);       /* Cards, panels, modals     */
    --bg-elevated:  var(--color-white);       /* Dropdowns, popovers       */
    --bg-sunken:    var(--color-slate-50);    /* Input fields, code blocks */
    --bg-subtle:    var(--color-slate-100);   /* Hover states, row strips  */
    --bg-overlay:   rgba(0, 0, 0, 0.45);     /* Modal backdrops           */

    /* ── Text ─────────────────────────────────────────────────────────── */
    --text-primary:   #111827;                /* Body text, headings       */
    --text-secondary: var(--color-slate-500); /* Labels, captions          */
    --text-muted:     var(--color-slate-400); /* Placeholders, disabled    */
    --text-inverse:   var(--color-white);     /* Text on dark/brand bg     */
    --text-link:      var(--color-green-700); /* Anchor/link color         */
    --text-link-hover:var(--color-green-600);

    /* Feedback text */
    --text-danger:  var(--color-red-600);
    --text-warning: var(--color-amber-700);
    --text-success: var(--color-green-700);
    --text-info:    var(--color-blue-600);

    /* ── Borders ──────────────────────────────────────────────────────── */
    --border-default: var(--color-slate-200);
    --border-strong:  var(--color-slate-300);
    --border-focus:   var(--color-green-500);
    --border-danger:  var(--color-red-500);
    --border-success: var(--color-green-500);

    /* ── Interactive states ───────────────────────────────────────────── */
    --bg-hover:    var(--color-slate-50);
    --bg-active:   var(--color-slate-100);
    --bg-selected: var(--color-green-50);
    --bg-disabled: var(--color-slate-100);

    /* ── Sidebar ──────────────────────────────────────────────────────── */
    --sidebar-bg:          var(--color-green-900);
    --sidebar-text:        rgba(255, 255, 255, 0.80);
    --sidebar-text-active: var(--color-white);
    --sidebar-item-hover:  rgba(255, 255, 255, 0.08);
    --sidebar-item-active: rgba(255, 255, 255, 0.15);
    --sidebar-border:      rgba(255, 255, 255, 0.10);
    --sidebar-width:       260px;
    --sidebar-width-collapsed: 64px;

    /* ── Navbar ───────────────────────────────────────────────────────── */
    --navbar-bg:     var(--color-white);
    --navbar-border: var(--border-default);
    --navbar-height: 60px;

    /* ── Feedback backgrounds ─────────────────────────────────────────── */
    --bg-danger:   var(--color-red-50);
    --bg-warning:  var(--color-amber-50);
    --bg-success:  var(--color-green-50);
    --bg-info:     var(--color-blue-50);

    /* ── Shadows ──────────────────────────────────────────────────────── */
    --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.10), 0 1px 2px -1px rgba(0, 0, 0, 0.10);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.10), 0 2px 4px -2px rgba(0, 0, 0, 0.10);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.10), 0 4px 6px -4px rgba(0, 0, 0, 0.10);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.10), 0 8px 10px -6px rgba(0, 0, 0, 0.10);
    --shadow-focus: 0 0 0 3px rgba(16, 185, 129, 0.35);  /* Brand-colored focus ring */
}

/* ═══════════════════════════════════════════════════════════════════════════
   SEMANTIC TOKENS — DARK MODE
   Only override the tokens that change. Palette stays the same.
═══════════════════════════════════════════════════════════════════════════ */
[data-theme="dark"] {
    /* ── Brand ────────────────────────────────────────────────────────── */
    --brand-primary:        var(--color-green-400);
    --brand-primary-hover:  var(--color-green-300);
    --brand-primary-active: var(--color-green-500);
    --brand-primary-subtle: rgba(52, 211, 153, 0.12);
    --brand-primary-border: rgba(52, 211, 153, 0.30);
    --brand-on-primary:     var(--color-slate-900);

    /* ── Backgrounds ──────────────────────────────────────────────────── */
    --bg-page:    var(--color-slate-950);
    --bg-surface: var(--color-slate-900);
    --bg-elevated:var(--color-slate-800);
    --bg-sunken:  var(--color-slate-850);
    --bg-subtle:  var(--color-slate-800);
    --bg-overlay: rgba(0, 0, 0, 0.65);

    /* ── Text ─────────────────────────────────────────────────────────── */
    --text-primary:    var(--color-slate-50);
    --text-secondary:  var(--color-slate-400);
    --text-muted:      var(--color-slate-500);
    --text-link:       var(--color-green-400);
    --text-link-hover: var(--color-green-300);

    /* Feedback text */
    --text-danger:  var(--color-red-400);
    --text-warning: var(--color-amber-400);
    --text-success: var(--color-green-400);
    --text-info:    var(--color-blue-400);

    /* ── Borders ──────────────────────────────────────────────────────── */
    --border-default: var(--color-slate-700);
    --border-strong:  var(--color-slate-600);
    --border-focus:   var(--color-green-400);

    /* ── Interactive ──────────────────────────────────────────────────── */
    --bg-hover:    var(--color-slate-800);
    --bg-active:   var(--color-slate-700);
    --bg-selected: rgba(52, 211, 153, 0.12);
    --bg-disabled: var(--color-slate-800);

    /* ── Sidebar ──────────────────────────────────────────────────────── */
    --sidebar-bg:          var(--color-slate-950);
    --sidebar-border:      rgba(255, 255, 255, 0.06);

    /* ── Navbar ───────────────────────────────────────────────────────── */
    --navbar-bg:     var(--color-slate-900);
    --navbar-border: var(--color-slate-700);

    /* ── Feedback backgrounds ─────────────────────────────────────────── */
    --bg-danger:   rgba(239, 68, 68, 0.12);
    --bg-warning:  rgba(245, 158, 11, 0.12);
    --bg-success:  rgba(16, 185, 129, 0.12);
    --bg-info:     rgba(59, 130, 246, 0.12);

    /* ── Shadows (heavier in dark mode) ──────────────────────────────── */
    --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.30);
    --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.40), 0 1px 2px -1px rgba(0, 0, 0, 0.40);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.50), 0 2px 4px -2px rgba(0, 0, 0, 0.50);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.60), 0 4px 6px -4px rgba(0, 0, 0, 0.60);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.65), 0 8px 10px -6px rgba(0, 0, 0, 0.65);
    --shadow-focus: 0 0 0 3px rgba(52, 211, 153, 0.40);
}

/* ═══════════════════════════════════════════════════════════════════════════
   CONSTANT TOKENS — do not override in [data-theme="dark"]
═══════════════════════════════════════════════════════════════════════════ */
:root {
    /* ── Spacing scale (rem) ─────────────────────────────────────────── */
    --space-0:    0;
    --space-px:   1px;
    --space-0-5:  0.125rem;  /*  2px */
    --space-1:    0.25rem;   /*  4px */
    --space-1-5:  0.375rem;  /*  6px */
    --space-2:    0.5rem;    /*  8px */
    --space-2-5:  0.625rem;  /* 10px */
    --space-3:    0.75rem;   /* 12px */
    --space-3-5:  0.875rem;  /* 14px */
    --space-4:    1rem;      /* 16px */
    --space-5:    1.25rem;   /* 20px */
    --space-6:    1.5rem;    /* 24px */
    --space-7:    1.75rem;   /* 28px */
    --space-8:    2rem;      /* 32px */
    --space-9:    2.25rem;   /* 36px */
    --space-10:   2.5rem;    /* 40px */
    --space-11:   2.75rem;   /* 44px */
    --space-12:   3rem;      /* 48px */
    --space-14:   3.5rem;    /* 56px */
    --space-16:   4rem;      /* 64px */
    --space-20:   5rem;      /* 80px */
    --space-24:   6rem;      /* 96px */

    /* ── Typography ──────────────────────────────────────────────────── */
    --font-sans:  'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono:  'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;

    --text-2xs:  0.625rem;  /* 10px */
    --text-xs:   0.75rem;   /* 12px */
    --text-sm:   0.875rem;  /* 14px */
    --text-base: 1rem;      /* 16px */
    --text-lg:   1.125rem;  /* 18px */
    --text-xl:   1.25rem;   /* 20px */
    --text-2xl:  1.5rem;    /* 24px */
    --text-3xl:  1.875rem;  /* 30px */
    --text-4xl:  2.25rem;   /* 36px */

    --font-weight-normal:   400;
    --font-weight-medium:   500;
    --font-weight-semibold: 600;
    --font-weight-bold:     700;

    --leading-tight:  1.25;
    --leading-snug:   1.375;
    --leading-normal: 1.5;
    --leading-relaxed:1.625;

    /* ── Border radii ─────────────────────────────────────────────────── */
    --radius-none: 0;
    --radius-sm:   0.25rem;   /*  4px */
    --radius-md:   0.375rem;  /*  6px */
    --radius-lg:   0.5rem;    /*  8px */
    --radius-xl:   0.75rem;   /* 12px */
    --radius-2xl:  1rem;      /* 16px */
    --radius-3xl:  1.5rem;    /* 24px */
    --radius-full: 9999px;

    /* ── Transitions (GPU-accelerated: only transform/opacity/color) ─── */
    --ease-in:     cubic-bezier(0.4, 0, 1, 1);
    --ease-out:    cubic-bezier(0, 0, 0.2, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-bounce: cubic-bezier(0.68, -0.55, 0.27, 1.55);

    --duration-fast:   100ms;
    --duration-normal: 200ms;
    --duration-slow:   300ms;
    --duration-slower: 500ms;

    /* Shorthand composites */
    --transition-fast:   var(--duration-fast)   var(--ease-in-out);
    --transition-normal: var(--duration-normal) var(--ease-in-out);
    --transition-slow:   var(--duration-slow)   var(--ease-in-out);
    --transition-spring: var(--duration-slower) var(--ease-spring);

    /* ── Z-index scale ────────────────────────────────────────────────── */
    --z-base:     0;
    --z-raised:   10;
    --z-dropdown: 100;
    --z-sticky:   200;
    --z-fixed:    300;
    --z-backdrop: 400;
    --z-modal:    500;
    --z-toast:    600;
    --z-tooltip:  700;

    /* ── Breakpoints (reference only — use in CSS media queries) ─────── */
    /* --bp-sm:  640px  — large phone landscape                          */
    /* --bp-md:  768px  — tablet portrait                                */
    /* --bp-lg:  1024px — small laptop                                   */
    /* --bp-xl:  1280px — desktop                                        */
    /* --bp-2xl: 1536px — wide desktop                                   */
}

/* ═══════════════════════════════════════════════════════════════════════════
   THEME TRANSITION
   Only animates color/background properties — no layout thrash.
   transform and opacity-only animations are handled per-component.
═══════════════════════════════════════════════════════════════════════════ */
*,
*::before,
*::after {
    transition:
        background-color var(--transition-normal),
        border-color     var(--transition-normal),
        color            var(--transition-normal),
        box-shadow       var(--transition-normal);
}

/* Opt-out for elements where color transitions are undesirable */
.no-theme-transition,
.no-theme-transition *,
img,
video,
canvas {
    transition: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   GLOBAL BASE — Applied to <html> / <body>
   Components build on top of these; tokens.css sets the foundation.
═══════════════════════════════════════════════════════════════════════════ */
html {
    /* Prevent layout shift during theme detection */
    background-color: var(--bg-page);
    /* Disable 300ms tap delay on touch devices */
    touch-action: manipulation;
    /* Smooth scrolling */
    scroll-behavior: smooth;
}

body {
    font-family:    var(--font-sans);
    font-size:      var(--text-base);
    line-height:    var(--leading-normal);
    color:          var(--text-primary);
    background-color: var(--bg-page);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Focus ring — accessible and on-brand */
:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
}

/* Minimum tap target size (WCAG 2.5.8) — primary actions only */
.btn:not(.btn-sm):not(.btn-xs),
.nav-link,
.form-select:not(.form-select-sm) {
    min-height: 44px;
}

/* Small buttons, inline links, badges, and table elements are exempt */

/* ═══════════════════════════════════════════════════════════════════════════
   SKELETON LOADER ANIMATION (GPU-accelerated via background-position)
═══════════════════════════════════════════════════════════════════════════ */
@keyframes skeleton-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.skeleton {
    background: linear-gradient(
        90deg,
        var(--bg-subtle) 25%,
        var(--bg-surface) 50%,
        var(--bg-subtle) 75%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.6s ease-in-out infinite;
    border-radius: var(--radius-md);
    /* Override the global theme transition for the animation to work */
    transition: none !important;
}

/* Common skeleton shapes */
.skeleton-text  { height: 1em;    width: 100%; }
.skeleton-title { height: 1.5em;  width: 60%;  }
.skeleton-avatar{ height: 2.5rem; width: 2.5rem; border-radius: var(--radius-full); }
.skeleton-btn   { height: 2.25rem; width: 6rem; }

/* ═══════════════════════════════════════════════════════════════════════════
   DELINQUENCY MAP TILES — dark-mode overrides
   (light-mode defaults live in style.css; dark mode needs stronger tints)
═══════════════════════════════════════════════════════════════════════════ */
[data-theme="dark"] .tile-good     { background: #065f46; color: #d1fae5; }
[data-theme="dark"] .tile-on-terms { background: #1e3a5f; color: #93c5fd; }
[data-theme="dark"] .tile-nomember { background: #78350f; color: #fde68a; }
[data-theme="dark"] .tile-warning  { background: #78350f; color: #fde68a; }
[data-theme="dark"] .tile-critical { background: #7f1d1d; color: #fca5a5; }
[data-theme="dark"] .tile-vacant   { background: #1e293b; color: #64748b; }
.skeleton-card  { height: 8rem;   width: 100%; }

/* ═══════════════════════════════════════════════════════════════════════════
   PAGE ENTRY ANIMATION — used by the router on every navigation
═══════════════════════════════════════════════════════════════════════════ */
@keyframes page-enter {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.page-enter {
    animation: page-enter var(--duration-normal) var(--ease-out) both;
}

/* ═══════════════════════════════════════════════════════════════════════════
   REDUCED MOTION — respect user preference (WCAG 2.3.3)
═══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .skeleton {
        animation: none;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SCROLLBAR STYLING (Webkit + Firefox)
═══════════════════════════════════════════════════════════════════════════ */
:root {
    scrollbar-width: thin;
    scrollbar-color: var(--border-strong) transparent;
}

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background-color: var(--border-strong);
    border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover { background-color: var(--text-muted); }