/**
 * PropertyMetrix Design Tokens
 * propertymetrix.co — Master CSS Custom Properties
 *
 * Import this file as the FIRST stylesheet in every app.
 * All other PropertyMetrix styles reference these variables.
 *
 * Apps using this file:
 *  - Homzen-137         (Bootstrap 5 + Laravel Blade)
 *  - ZaiProty-46        (Bootstrap 4 + Laravel Blade)
 *  - SocietyPro         (Tailwind CSS + Livewire)
 *  - SmartTenant-24     (Tailwind CSS + Alpine.js)
 *  - SmartFieldService  (Tailwind CSS + Alpine.js)
 *  - BookingCore        (Tailwind CSS + Vue.js)
 *  - Demandium          (Bootstrap + Laravel Blade)
 *  - OnDemandSalon      (Laravel + API)
 *  - Document Mgmt      (Angular Material)
 */

:root {

  /* ============================================================
     BRAND COLORS
     ============================================================ */

  /* Primary — Deep Navy Indigo (trust, authority, stability) */
  --pm-primary-50:  #eef0fb;
  --pm-primary-100: #d5d9f5;
  --pm-primary-200: #aab3eb;
  --pm-primary-300: #7f8de1;
  --pm-primary-400: #5467d7;
  --pm-primary-500: #2941cd;   /* Base primary */
  --pm-primary-600: #2137b8;   /* Primary interactive */
  --pm-primary-700: #192da3;
  --pm-primary-800: #11238e;
  --pm-primary-900: #091979;
  --pm-primary-950: #060f52;

  /* Secondary — Warm Amber/Gold (energy, prosperity, premium) */
  --pm-secondary-50:  #fffbeb;
  --pm-secondary-100: #fef3c7;
  --pm-secondary-200: #fde68a;
  --pm-secondary-300: #fcd34d;
  --pm-secondary-400: #fbbf24;
  --pm-secondary-500: #f59e0b;   /* Base secondary */
  --pm-secondary-600: #d97706;   /* Secondary interactive */
  --pm-secondary-700: #b45309;
  --pm-secondary-800: #92400e;
  --pm-secondary-900: #78350f;
  --pm-secondary-950: #451a03;

  /* Accent — Teal (connectivity, modern, digital) */
  --pm-accent-50:  #f0fdf9;
  --pm-accent-100: #ccfbef;
  --pm-accent-200: #99f6e0;
  --pm-accent-300: #5eead4;
  --pm-accent-400: #2dd4bf;
  --pm-accent-500: #14b8a6;   /* Base accent */
  --pm-accent-600: #0d9488;
  --pm-accent-700: #0f766e;
  --pm-accent-800: #115e59;
  --pm-accent-900: #134e4a;

  /* Semantic — Success */
  --pm-success-50:  #f0fdf4;
  --pm-success-100: #dcfce7;
  --pm-success-500: #22c55e;
  --pm-success-600: #16a34a;
  --pm-success-700: #15803d;

  /* Semantic — Warning */
  --pm-warning-50:  #fffbeb;
  --pm-warning-100: #fef3c7;
  --pm-warning-500: #f59e0b;
  --pm-warning-600: #d97706;

  /* Semantic — Danger/Error */
  --pm-danger-50:  #fef2f2;
  --pm-danger-100: #fee2e2;
  --pm-danger-500: #ef4444;
  --pm-danger-600: #dc2626;
  --pm-danger-700: #b91c1c;

  /* Semantic — Info */
  --pm-info-50:  #eff6ff;
  --pm-info-100: #dbeafe;
  --pm-info-500: #3b82f6;
  --pm-info-600: #2563eb;

  /* ============================================================
     NEUTRAL PALETTE
     ============================================================ */

  --pm-neutral-0:   #ffffff;
  --pm-neutral-50:  #f8f9fc;
  --pm-neutral-100: #f1f3f9;
  --pm-neutral-200: #e2e6f0;
  --pm-neutral-300: #c8cedf;
  --pm-neutral-400: #9aa3be;
  --pm-neutral-500: #6b7596;
  --pm-neutral-600: #4e5877;
  --pm-neutral-700: #363f5e;
  --pm-neutral-800: #222845;
  --pm-neutral-900: #131828;
  --pm-neutral-950: #0a0d18;

  /* ============================================================
     SEMANTIC ALIASES (map tokens to roles)
     ============================================================ */

  --pm-color-brand:           var(--pm-primary-600);
  --pm-color-brand-light:     var(--pm-primary-100);
  --pm-color-brand-dark:      var(--pm-primary-900);
  --pm-color-highlight:       var(--pm-secondary-500);
  --pm-color-highlight-light: var(--pm-secondary-100);
  --pm-color-highlight-dark:  var(--pm-secondary-700);

  --pm-color-bg:              var(--pm-neutral-0);
  --pm-color-bg-subtle:       var(--pm-neutral-50);
  --pm-color-bg-muted:        var(--pm-neutral-100);
  --pm-color-surface:         var(--pm-neutral-0);
  --pm-color-surface-raised:  var(--pm-neutral-50);
  --pm-color-surface-overlay: var(--pm-neutral-100);

  --pm-color-border:          var(--pm-neutral-200);
  --pm-color-border-strong:   var(--pm-neutral-300);

  --pm-color-text:            var(--pm-neutral-900);
  --pm-color-text-secondary:  var(--pm-neutral-600);
  --pm-color-text-tertiary:   var(--pm-neutral-400);
  --pm-color-text-inverse:    var(--pm-neutral-0);
  --pm-color-text-brand:      var(--pm-primary-600);
  --pm-color-text-highlight:  var(--pm-secondary-600);

  /* ============================================================
     TYPOGRAPHY
     ============================================================ */

  /* Font families */
  --pm-font-display:  'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif;
  --pm-font-body:     'Inter', 'Segoe UI', system-ui, sans-serif;
  --pm-font-mono:     'JetBrains Mono', 'Fira Code', 'Courier New', monospace;

  /* Font sizes (fluid scale, rem) */
  --pm-text-xs:   0.75rem;    /*  12px */
  --pm-text-sm:   0.875rem;   /*  14px */
  --pm-text-base: 1rem;       /*  16px */
  --pm-text-lg:   1.125rem;   /*  18px */
  --pm-text-xl:   1.25rem;    /*  20px */
  --pm-text-2xl:  1.5rem;     /*  24px */
  --pm-text-3xl:  1.875rem;   /*  30px */
  --pm-text-4xl:  2.25rem;    /*  36px */
  --pm-text-5xl:  3rem;       /*  48px */
  --pm-text-6xl:  3.75rem;    /*  60px */

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

  /* Line heights */
  --pm-leading-tight:   1.25;
  --pm-leading-snug:    1.375;
  --pm-leading-normal:  1.5;
  --pm-leading-relaxed: 1.625;
  --pm-leading-loose:   2;

  /* Letter spacing */
  --pm-tracking-tight:  -0.025em;
  --pm-tracking-normal:  0em;
  --pm-tracking-wide:    0.025em;
  --pm-tracking-wider:   0.05em;
  --pm-tracking-widest:  0.1em;

  /* ============================================================
     SPACING
     ============================================================ */

  --pm-space-0:    0;
  --pm-space-px:   1px;
  --pm-space-0-5:  0.125rem;   /*  2px */
  --pm-space-1:    0.25rem;    /*  4px */
  --pm-space-1-5:  0.375rem;   /*  6px */
  --pm-space-2:    0.5rem;     /*  8px */
  --pm-space-2-5:  0.625rem;   /* 10px */
  --pm-space-3:    0.75rem;    /* 12px */
  --pm-space-3-5:  0.875rem;   /* 14px */
  --pm-space-4:    1rem;       /* 16px */
  --pm-space-5:    1.25rem;    /* 20px */
  --pm-space-6:    1.5rem;     /* 24px */
  --pm-space-7:    1.75rem;    /* 28px */
  --pm-space-8:    2rem;       /* 32px */
  --pm-space-9:    2.25rem;    /* 36px */
  --pm-space-10:   2.5rem;     /* 40px */
  --pm-space-11:   2.75rem;    /* 44px */
  --pm-space-12:   3rem;       /* 48px */
  --pm-space-14:   3.5rem;     /* 56px */
  --pm-space-16:   4rem;       /* 64px */
  --pm-space-20:   5rem;       /* 80px */
  --pm-space-24:   6rem;       /* 96px */
  --pm-space-28:   7rem;       /* 112px */
  --pm-space-32:   8rem;       /* 128px */
  --pm-space-40:   10rem;      /* 160px */
  --pm-space-48:   12rem;      /* 192px */
  --pm-space-56:   14rem;      /* 224px */
  --pm-space-64:   16rem;      /* 256px */

  /* ============================================================
     BORDER RADIUS
     ============================================================ */

  --pm-radius-none: 0;
  --pm-radius-sm:   0.25rem;   /* 4px  — inputs, small badges */
  --pm-radius-md:   0.5rem;    /* 8px  — cards, dropdowns */
  --pm-radius-lg:   0.75rem;   /* 12px — panels, modals */
  --pm-radius-xl:   1rem;      /* 16px — feature cards */
  --pm-radius-2xl:  1.5rem;    /* 24px — hero cards */
  --pm-radius-full: 9999px;    /* pills, avatars */

  /* Component-specific radius aliases */
  --pm-radius-btn:   var(--pm-radius-md);
  --pm-radius-card:  var(--pm-radius-lg);
  --pm-radius-input: var(--pm-radius-sm);
  --pm-radius-badge: var(--pm-radius-full);
  --pm-radius-modal: var(--pm-radius-xl);

  /* ============================================================
     SHADOWS
     ============================================================ */

  --pm-shadow-xs:   0 1px 2px 0 rgb(19 24 40 / 0.05);
  --pm-shadow-sm:   0 1px 3px 0 rgb(19 24 40 / 0.1), 0 1px 2px -1px rgb(19 24 40 / 0.1);
  --pm-shadow-md:   0 4px 6px -1px rgb(19 24 40 / 0.1), 0 2px 4px -2px rgb(19 24 40 / 0.1);
  --pm-shadow-lg:   0 10px 15px -3px rgb(19 24 40 / 0.1), 0 4px 6px -4px rgb(19 24 40 / 0.1);
  --pm-shadow-xl:   0 20px 25px -5px rgb(19 24 40 / 0.1), 0 8px 10px -6px rgb(19 24 40 / 0.1);
  --pm-shadow-2xl:  0 25px 50px -12px rgb(19 24 40 / 0.25);
  --pm-shadow-inner: inset 0 2px 4px 0 rgb(19 24 40 / 0.05);
  --pm-shadow-none: 0 0 #0000;

  /* Brand-tinted shadow (for CTA buttons, featured cards) */
  --pm-shadow-brand: 0 4px 14px 0 rgb(41 65 205 / 0.25);
  --pm-shadow-gold:  0 4px 14px 0 rgb(245 158 11 / 0.3);

  /* ============================================================
     BORDERS
     ============================================================ */

  --pm-border-width:    1px;
  --pm-border-width-2:  2px;
  --pm-border-width-4:  4px;

  --pm-border-default: var(--pm-border-width) solid var(--pm-color-border);
  --pm-border-strong:  var(--pm-border-width) solid var(--pm-color-border-strong);
  --pm-border-brand:   var(--pm-border-width-2) solid var(--pm-color-brand);
  --pm-border-focus:   0 0 0 3px rgb(41 65 205 / 0.2);

  /* ============================================================
     Z-INDEX SCALE
     ============================================================ */

  --pm-z-base:      0;
  --pm-z-raised:    10;
  --pm-z-dropdown:  100;
  --pm-z-sticky:    200;
  --pm-z-overlay:   300;
  --pm-z-modal:     400;
  --pm-z-popover:   500;
  --pm-z-toast:     600;
  --pm-z-tooltip:   700;
  --pm-z-navbar:    800;

  /* ============================================================
     TRANSITIONS
     ============================================================ */

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

  --pm-ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --pm-ease-in:      cubic-bezier(0.4, 0, 1, 1);
  --pm-ease-out:     cubic-bezier(0, 0, 0.2, 1);
  --pm-ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);

  --pm-transition-default: all var(--pm-duration-normal) var(--pm-ease-default);
  --pm-transition-colors:  color var(--pm-duration-normal) var(--pm-ease-default),
                            background-color var(--pm-duration-normal) var(--pm-ease-default),
                            border-color var(--pm-duration-normal) var(--pm-ease-default);
  --pm-transition-transform: transform var(--pm-duration-normal) var(--pm-ease-default);
  --pm-transition-shadow:  box-shadow var(--pm-duration-normal) var(--pm-ease-default);

  /* ============================================================
     LAYOUT
     ============================================================ */

  /* Container max-widths */
  --pm-container-sm:  640px;
  --pm-container-md:  768px;
  --pm-container-lg:  1024px;
  --pm-container-xl:  1280px;
  --pm-container-2xl: 1536px;

  /* Navbar height (all apps must reserve this space) */
  --pm-navbar-height:        64px;
  --pm-navbar-height-mobile: 56px;

  /* Sidebar width */
  --pm-sidebar-width:          260px;
  --pm-sidebar-width-collapsed: 64px;

  /* ============================================================
     COMPONENT: BUTTON
     ============================================================ */

  --pm-btn-font:           var(--pm-font-body);
  --pm-btn-font-weight:    var(--pm-weight-semibold);
  --pm-btn-letter-spacing: var(--pm-tracking-wide);

  --pm-btn-sm-height:   2rem;      /* 32px */
  --pm-btn-sm-px:       var(--pm-space-3);
  --pm-btn-sm-text:     var(--pm-text-sm);

  --pm-btn-md-height:   2.5rem;    /* 40px */
  --pm-btn-md-px:       var(--pm-space-5);
  --pm-btn-md-text:     var(--pm-text-sm);

  --pm-btn-lg-height:   3rem;      /* 48px */
  --pm-btn-lg-px:       var(--pm-space-6);
  --pm-btn-lg-text:     var(--pm-text-base);

  --pm-btn-xl-height:   3.5rem;    /* 56px */
  --pm-btn-xl-px:       var(--pm-space-8);
  --pm-btn-xl-text:     var(--pm-text-lg);

  --pm-btn-radius:      var(--pm-radius-btn);
  --pm-btn-transition:  var(--pm-transition-colors), box-shadow var(--pm-duration-normal) var(--pm-ease-default),
                        transform var(--pm-duration-fast) var(--pm-ease-default);

  /* Button variant: primary */
  --pm-btn-primary-bg:     var(--pm-primary-600);
  --pm-btn-primary-text:   var(--pm-neutral-0);
  --pm-btn-primary-hover:  var(--pm-primary-700);
  --pm-btn-primary-shadow: var(--pm-shadow-brand);

  /* Button variant: secondary (gold) */
  --pm-btn-secondary-bg:   var(--pm-secondary-500);
  --pm-btn-secondary-text: var(--pm-neutral-900);
  --pm-btn-secondary-hover: var(--pm-secondary-600);

  /* Button variant: ghost */
  --pm-btn-ghost-text:     var(--pm-primary-600);
  --pm-btn-ghost-hover-bg: var(--pm-primary-50);

  /* Button variant: outline */
  --pm-btn-outline-border: var(--pm-primary-600);
  --pm-btn-outline-text:   var(--pm-primary-600);
  --pm-btn-outline-hover-bg: var(--pm-primary-50);

  /* ============================================================
     COMPONENT: CARD
     ============================================================ */

  --pm-card-bg:       var(--pm-neutral-0);
  --pm-card-border:   var(--pm-border-default);
  --pm-card-radius:   var(--pm-radius-card);
  --pm-card-shadow:   var(--pm-shadow-sm);
  --pm-card-shadow-hover: var(--pm-shadow-lg);
  --pm-card-padding:  var(--pm-space-6);

  /* ============================================================
     COMPONENT: INPUT / FORM
     ============================================================ */

  --pm-input-bg:          var(--pm-neutral-0);
  --pm-input-border:      var(--pm-color-border);
  --pm-input-border-focus: var(--pm-primary-500);
  --pm-input-ring-focus:  var(--pm-border-focus);
  --pm-input-text:        var(--pm-color-text);
  --pm-input-placeholder: var(--pm-neutral-400);
  --pm-input-radius:      var(--pm-radius-input);
  --pm-input-height:      2.5rem;   /* 40px */
  --pm-input-height-lg:   3rem;     /* 48px */
  --pm-input-padding-x:   var(--pm-space-3);
  --pm-input-padding-y:   var(--pm-space-2);
  --pm-input-font-size:   var(--pm-text-sm);
  --pm-input-label-size:  var(--pm-text-sm);
  --pm-input-label-weight: var(--pm-weight-medium);
  --pm-input-label-color: var(--pm-neutral-700);

  /* ============================================================
     COMPONENT: BADGE / PILL
     ============================================================ */

  --pm-badge-font-size:   var(--pm-text-xs);
  --pm-badge-font-weight: var(--pm-weight-semibold);
  --pm-badge-radius:      var(--pm-radius-badge);
  --pm-badge-px:          var(--pm-space-2);
  --pm-badge-py:          var(--pm-space-0-5);

  /* ============================================================
     COMPONENT: NAVBAR
     ============================================================ */

  --pm-navbar-bg:         var(--pm-neutral-0);
  --pm-navbar-border:     var(--pm-border-default);
  --pm-navbar-shadow:     var(--pm-shadow-sm);
  --pm-navbar-text:       var(--pm-neutral-700);
  --pm-navbar-text-hover: var(--pm-primary-600);
  --pm-navbar-active-color: var(--pm-primary-600);
  --pm-navbar-active-bg:  var(--pm-primary-50);
  --pm-navbar-logo-height: 32px;

  /* ============================================================
     COMPONENT: SIDEBAR / DASHBOARD NAV
     ============================================================ */

  --pm-sidebar-bg:          var(--pm-neutral-950);
  --pm-sidebar-text:        var(--pm-neutral-300);
  --pm-sidebar-text-hover:  var(--pm-neutral-0);
  --pm-sidebar-active-bg:   var(--pm-primary-600);
  --pm-sidebar-active-text: var(--pm-neutral-0);
  --pm-sidebar-section-text: var(--pm-neutral-500);

  /* ============================================================
     COMPONENT: TABLE
     ============================================================ */

  --pm-table-header-bg:     var(--pm-neutral-50);
  --pm-table-header-text:   var(--pm-neutral-600);
  --pm-table-row-hover-bg:  var(--pm-primary-50);
  --pm-table-border:        var(--pm-neutral-200);
  --pm-table-font-size:     var(--pm-text-sm);

  /* ============================================================
     COMPONENT: MODAL / DIALOG
     ============================================================ */

  --pm-modal-bg:          var(--pm-neutral-0);
  --pm-modal-radius:      var(--pm-radius-modal);
  --pm-modal-shadow:      var(--pm-shadow-2xl);
  --pm-modal-overlay-bg:  rgb(10 13 24 / 0.6);
  --pm-modal-padding:     var(--pm-space-6);

  /* ============================================================
     COMPONENT: TOAST / ALERT
     ============================================================ */

  --pm-toast-radius:      var(--pm-radius-md);
  --pm-toast-shadow:      var(--pm-shadow-xl);
  --pm-toast-font-size:   var(--pm-text-sm);

  /* ============================================================
     PROPERTY-SPECIFIC TOKENS
     (unique to real estate / property management context)
     ============================================================ */

  /* Property status badges */
  --pm-status-available-bg:   #dcfce7;
  --pm-status-available-text: #15803d;
  --pm-status-rented-bg:      #dbeafe;
  --pm-status-rented-text:    #1d4ed8;
  --pm-status-sold-bg:        #fee2e2;
  --pm-status-sold-text:      #b91c1c;
  --pm-status-pending-bg:     #fef3c7;
  --pm-status-pending-text:   #b45309;
  --pm-status-maintenance-bg: #f3e8ff;
  --pm-status-maintenance-text: #7e22ce;

  /* Property type icons / accent color */
  --pm-type-residential: #2941cd;
  --pm-type-commercial:  #0f766e;
  --pm-type-industrial:  #b45309;
  --pm-type-land:        #15803d;

  /* Price display */
  --pm-price-color:       var(--pm-primary-700);
  --pm-price-size:        var(--pm-text-xl);
  --pm-price-weight:      var(--pm-weight-bold);
  --pm-price-accent-color: var(--pm-secondary-600);

  /* Map / location accent */
  --pm-map-pin-color:     var(--pm-primary-600);
  --pm-map-pin-active:    var(--pm-secondary-500);

  /* Rating stars */
  --pm-star-filled:  #f59e0b;
  --pm-star-empty:   #e2e6f0;

  /* ============================================================
     DARK MODE OVERRIDES
     ============================================================ */
}

@media (prefers-color-scheme: dark) {
  :root {
    --pm-color-bg:              var(--pm-neutral-950);
    --pm-color-bg-subtle:       var(--pm-neutral-900);
    --pm-color-bg-muted:        var(--pm-neutral-800);
    --pm-color-surface:         var(--pm-neutral-900);
    --pm-color-surface-raised:  var(--pm-neutral-800);
    --pm-color-surface-overlay: var(--pm-neutral-700);

    --pm-color-border:          var(--pm-neutral-700);
    --pm-color-border-strong:   var(--pm-neutral-600);

    --pm-color-text:            var(--pm-neutral-50);
    --pm-color-text-secondary:  var(--pm-neutral-300);
    --pm-color-text-tertiary:   var(--pm-neutral-500);

    --pm-card-bg:       var(--pm-neutral-900);
    --pm-input-bg:      var(--pm-neutral-800);
    --pm-navbar-bg:     var(--pm-neutral-950);
    --pm-modal-bg:      var(--pm-neutral-900);

    --pm-table-header-bg:  var(--pm-neutral-800);
  }
}

/* Force dark mode on elements with data-pm-theme="dark" */
[data-pm-theme="dark"] {
  --pm-color-bg:              var(--pm-neutral-950);
  --pm-color-bg-subtle:       var(--pm-neutral-900);
  --pm-color-bg-muted:        var(--pm-neutral-800);
  --pm-color-surface:         var(--pm-neutral-900);
  --pm-color-surface-raised:  var(--pm-neutral-800);
  --pm-color-border:          var(--pm-neutral-700);
  --pm-color-border-strong:   var(--pm-neutral-600);
  --pm-color-text:            var(--pm-neutral-50);
  --pm-color-text-secondary:  var(--pm-neutral-300);
  --pm-color-text-tertiary:   var(--pm-neutral-500);
  --pm-card-bg:       var(--pm-neutral-900);
  --pm-input-bg:      var(--pm-neutral-800);
  --pm-navbar-bg:     var(--pm-neutral-950);
  --pm-modal-bg:      var(--pm-neutral-900);
  --pm-table-header-bg: var(--pm-neutral-800);
}