/* ==========================================================================
   DESIGN TOKENS — single source of truth for the whole application.
   Never hardcode colors, radii, shadows, z-index or timing in new code:
   use var(--token) from this file. Loaded first, before every other sheet.
   ========================================================================== */

:root {
  /* Spacing scale (4px base unit) */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;
  --sp-4: 16px;  --sp-5: 20px;  --sp-6: 24px;
  --sp-7: 28px;  --sp-8: 32px;  --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px;

  /* Border radius scale */
  --r-sm: 4px;   --r: 6px;      --r-md: 8px;
  --r-lg: 10px;  --r-xl: 12px;  --r-2xl: 16px;
  --r-3xl: 20px; --r-full: 9999px;

  /* Shadows (layered — subtle ambient + tighter contact shadow) */
  --sh-xs:  0 1px 2px rgba(0,0,0,0.04);
  --sh-sm:  0 1px 4px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --sh:     0 2px 8px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.05);
  --sh-md:  0 4px 16px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.05);
  --sh-lg:  0 8px 32px rgba(0,0,0,0.10), 0 4px 12px rgba(0,0,0,0.06);
  --sh-xl:  0 16px 48px rgba(0,0,0,0.12), 0 8px 24px rgba(0,0,0,0.07);
  --sh-2xl: 0 24px 64px rgba(0,0,0,0.15);

  /* Z-index scale.
     NOTE: Bootstrap components (modal 1055, dropdown 1000, tooltip 1080)
     keep their own library values — use these tokens for app-authored
     layers and keep app overlays above Bootstrap via --z-max when needed. */
  --z-base: 0;      --z-raised: 10;
  --z-dropdown: 100; --z-sticky: 200;
  --z-sidebar: 300;  --z-header: 300;
  --z-overlay: 400;  --z-modal: 500;
  --z-toast: 600;    --z-tooltip: 700;
  --z-max: 9999;

  /* Animation */
  --dur-fast: 100ms;  --dur: 150ms;  --dur-slow: 250ms;  --dur-slower: 350ms;
  --ease:        cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in:     cubic-bezier(0.4, 0, 1, 1);
  --ease-out:    cubic-bezier(0, 0, 0.2, 1);
  --ease-back:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);

  /* BRAND — default blue-600, swappable per-tenant via [data-theme] */
  --brand:        #2563eb;
  --brand-hover:  #1d4ed8;
  --brand-active: #1e40af;
  --brand-light:  #dbeafe;
  --brand-border: #93c5fd;
  --brand-muted:  #60a5fa;

  /* PAGE / SURFACE */
  --page-bg:       #f1f5f9;   /* page canvas — light slate, not pure white */
  --page-padding:        24px; /* design spec §7 */
  --page-padding-sm:     16px;
  --page-padding-mobile: 12px;
  --surface-1:     #ffffff;   /* cards, table rows */
  --surface-2:     #f8fafc;   /* alt rows, subtle recessed panels */
  --surface-3:     #f1f5f9;
  --surface-4:     #e2e8f0;
  --surface-hover: #f8fafc;
  --surface-active:#eef2ff;

  /* TEXT */
  --text-primary:   #1e293b;
  --text-secondary: #475569;
  --text-muted:     #64748b;
  --text-subtle:    #94a3b8;
  --text-disabled:  #cbd5e1;
  --text-inverse:   #ffffff;
  --text-link:      var(--brand);
  --text-error:     #dc2626;
  --text-success:   #166534;
  --text-warning:   #92400e;

  /* BORDER */
  --border-light:   #f1f5f9;
  --border-default: #e2e8f0;
  --border-medium:  #cbd5e1;
  --border-strong:  #94a3b8;
  --border-focus:   var(--brand);
  --border-error:   #ef4444;
  --border-success: #22c55e;
  --border-warning: #f59e0b;

  /* BUTTONS — design spec §11 (applied app-wide by lw-components.css) */
  --btn-height:       36px;   --btn-height-sm: 32px;   --btn-height-lg: 44px;
  --btn-padding-x:    16px;   --btn-padding-x-sm: 12px; --btn-padding-x-lg: 20px;
  --btn-radius:       8px;
  --btn-font-size:    var(--text-md);
  --btn-font-weight:  500;
  --btn-transition:   all 0.15s ease;
  --btn-icon-size:    16px;
  --btn-icon-gap:     8px;

  /* PRIMARY — solid brand blue, default CTA */
  --btn-primary-bg: var(--brand); --btn-primary-hover: var(--brand-hover);
  --btn-primary-active: var(--brand-active); --btn-primary-text: #ffffff;

  /* SECONDARY — solid dark slate */
  --btn-secondary-bg: #0f172a; --btn-secondary-hover: #1e293b;
  --btn-secondary-active: #020617; --btn-secondary-text: #ffffff;

  /* OUTLINE — white + gray border. Cancel/Back. */
  --btn-outline-bg: #ffffff; --btn-outline-hover: #f8fafc;
  --btn-outline-active: #f1f5f9; --btn-outline-text: #374151; --btn-outline-border: #d1d5db;

  /* GHOST — transparent. Toolbar/icon-only. */
  --btn-ghost-bg: transparent; --btn-ghost-hover: #f1f5f9;
  --btn-ghost-active: #e2e8f0; --btn-ghost-text: #4b5563;

  /* DANGER — solid red. Destructive only. */
  --btn-danger-bg: #dc2626; --btn-danger-hover: #b91c1c;
  --btn-danger-active: #991b1b; --btn-danger-text: #ffffff;

  /* SUCCESS — soft pastel. Approve-style positive actions. */
  --btn-success-bg: #dcfce7; --btn-success-hover: #bbf7d0;
  --btn-success-text: #166534; --btn-success-border: #86efac;

  /* WARNING — soft pastel amber (spec extension: same treatment as SUCCESS,
     needed because the app uses btn-warning; not in §11) */
  --btn-warning-bg: #fef3c7; --btn-warning-hover: #fde68a;
  --btn-warning-text: #92400e; --btn-warning-border: #fcd34d;

  /* CARDS — design spec §12 */
  --card-bg:            #ffffff;
  --card-border:        #e2e8f0;
  --card-radius:        12px;
  --card-shadow:        0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --card-shadow-hover:  0 4px 12px rgba(0,0,0,0.08);
  --card-padding:       20px;
  --card-padding-sm:    14px;
  --card-header-bg:     #ffffff;
  --card-header-border: #e2e8f0;
  --card-footer-bg:     #f8fafc;
  --card-footer-border: #e2e8f0;
}

/* Always respect prefers-reduced-motion — instant, no animation, when set. */
@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;
  }
}

/* ============================================================
   SEMANTIC STATUS PALETTE (owner spec) — every family follows
   base / bg / text / border (+dark). ALL colour usage in the
   app must call these tokens, never raw hexes.
   ============================================================ */
:root {
  --success: #22c55e; --success-bg: #dcfce7; --success-text: #166534; --success-border: #86efac; --success-dark: #15803d;
  --warning: #f59e0b; --warning-bg: #fef3c7; --warning-text: #92400e; --warning-border: #fde68a; --warning-dark: #b45309;
  --danger:  #ef4444; --danger-bg:  #fee2e2; --danger-text:  #991b1b; --danger-border: #fca5a5; --danger-dark:  #b91c1c;
  --info:    #3b82f6; --info-bg:    #dbeafe; --info-text:    #1d4ed8; --info-border:   #93c5fd; --info-dark:    #1e40af;
  --neutral: #64748b; --neutral-bg: #f1f5f9; --neutral-text: #475569; --neutral-border: #cbd5e1;
  --purple:  #8b5cf6; --purple-bg:  #f5f3ff; --purple-text:  #6d28d9; --purple-border: #ddd6fe;
  --orange:  #f97316; --orange-bg:  #fff7ed; --orange-text:  #c2410c; --orange-border: #fed7aa;
  --teal:    #14b8a6; --teal-bg:    #f0fdfa; --teal-text:    #0f766e; --teal-border:   #99f6e4;
  --pink:    #ec4899; --pink-bg:    #fdf2f8; --pink-text:    #be185d; --pink-border:   #f9a8d4;
  --cyan:    #06b6d4; --cyan-bg:    #ecfeff; --cyan-text:    #0e7490; --cyan-border:   #67e8f9;
  --amber:   #f59e0b; --amber-bg:   #fef3c7; --amber-text:   #b45309; --amber-border:  #fcd34d;
}

/* ============================================================
   FORMS & INPUTS (owner spec §10)
   ============================================================ */
:root {
  --input-bg: #ffffff;
  --input-bg-disabled: #f8fafc;
  --input-border: #e2e8f0;
  --input-border-hover: #cbd5e1;
  --input-border-focus: var(--brand);
  --input-border-error: #ef4444;
  --input-border-success: #22c55e;
  --input-text: #1e293b;
  --input-placeholder: #94a3b8;
  --input-shadow-focus: 0 0 0 3px rgba(79, 70, 229, 0.12);
  --input-shadow-error: 0 0 0 3px rgba(239, 68, 68, 0.12);
  --input-height: 38px;
  --input-height-sm: 30px;
  --input-height-lg: 44px;
  --input-padding-x: 12px;
  --input-padding-y: 8px;
  --input-radius: 8px;
  --input-font-size: var(--text-base);
  --input-label-size: var(--text-sm);
  --input-label-weight: 500;
  --input-label-color: #374151;
  --input-label-margin: 6px;
  --input-hint-size: var(--text-xs);
  --input-hint-color: #64748b;
  --input-error-size: var(--text-xs);
  --input-error-color: #dc2626;
  --input-required-color: #ef4444;
  --form-field-gap: 20px;
  --form-section-gap: 32px;
  --form-section-title-size: var(--text-md);
  --form-section-title-weight: 600;
  --form-group-cols-desktop: 2;
  --form-group-cols-mobile: 1;
}

/* ============================================================
   TABLE (owner spec §9)
   ============================================================ */
:root {
  --tbl-header-bg: #f8fafc;
  --tbl-header-text: #64748b;
  --tbl-header-border: #e2e8f0;
  --tbl-header-border-size: 2px;
  --tbl-row-bg: #ffffff;
  --tbl-row-border: #f1f5f9;
  --tbl-row-hover: #f8fafc;
  --tbl-row-selected: #eef2ff;
  --tbl-row-selected-border: var(--brand);
  --tbl-row-selected-bdr-w: 3px;
  --tbl-col-border: #f1f5f9;
  --tbl-col-border-size: 1px;
  --tbl-row-height: 28px; /* owner 2026-07-12: match the dense reports/ledger rhythm app-wide, not just list pages. */
  --tbl-font-size: var(--text-base);
  --tbl-header-font-size: 10px;
  --tbl-cell-pad-x: 8px;
  --tbl-cell-pad-y: 4px;
  /* dense (Excel-like) variant — report tables + inventory ledger/history only */
  --tbl-dense-row-height: 28px;
  --tbl-dense-cell-pad-y: 4px;
  --tbl-dense-cell-pad-x: 8px;
  --tbl-dense-head-pad-y: 6px;
  --tbl-dense-font-size: 10px;
  --tbl-frozen-shadow: 4px 0 8px rgba(0, 0, 0, 0.06);
  --tbl-frozen-shadow-r: -4px 0 8px rgba(0, 0, 0, 0.06);
  --tbl-skeleton-bg: #f1f5f9;
  --tbl-edit-border: var(--brand);
  --tbl-edit-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12);
  --tbl-success-flash: rgba(34, 197, 94, 0.15);
}