/* ============================================================
   Smart Con Platform — CSS Custom Properties  v2 (Premium)
   ============================================================ */
:root {
  /* ── Brand ─────────────────────────────────────────────── */
  --color-primary:       #2563EB;
  --color-primary-dark:  #1D4ED8;
  --color-primary-light: #EFF6FF;
  --color-primary-mid:   #BFDBFE;

  /* ── Platform Accent Colors ─────────────────────────────── */
  --color-shop:       #2563EB;
  --color-reno:       #D97706;
  --color-transport:  #059669;
  --color-design:     #7C3AED;
  --color-designer:   #DB2777;
  --color-property:   #0891B2;
  --color-logistic:   #DC2626;
  --color-education:  #EA580C;
  --color-travel:     #0D9488;
  --color-trade:      #65A30D;
  --color-job:        #7C3AED;
  --color-app:        #4F46E5;
  --color-forum:      #B45309;
  --color-moment:     #E11D48;
  --color-admin:      #1E293B;
  --color-main:       #1E40AF;

  /* ── Neutral — Slate-based (warmer, more modern) ────────── */
  --color-white:      #FFFFFF;
  --color-black:      #0F172A;
  --color-gray-50:    #F8FAFC;
  --color-gray-100:   #F1F5F9;
  --color-gray-200:   #E2E8F0;
  --color-gray-300:   #CBD5E1;
  --color-gray-400:   #94A3B8;
  --color-gray-500:   #64748B;
  --color-gray-600:   #475569;
  --color-gray-700:   #334155;
  --color-gray-800:   #1E293B;
  --color-gray-900:   #0F172A;

  /* ── Semantic Colors ────────────────────────────────────── */
  --color-success:       #10B981;
  --color-warning:       #F59E0B;
  --color-danger:        #EF4444;
  --color-info:          #3B82F6;
  --color-success-light: #D1FAE5;
  --color-warning-light: #FEF3C7;
  --color-danger-light:  #FEE2E2;
  --color-info-light:    #DBEAFE;

  /* ── App Surfaces ───────────────────────────────────────── */
  --color-bg:       #F0F4F8;
  --color-surface:  #FFFFFF;

  /* ── Dark Sidebar Palette ───────────────────────────────── */
  --sidebar-bg:          #0F172A;
  --sidebar-hover:       rgba(255,255,255,.06);
  --sidebar-active-bg:   rgba(255,255,255,.09);
  --sidebar-text:        #94A3B8;
  --sidebar-text-hover:  #CBD5E1;
  --sidebar-text-active: #F1F5F9;
  --sidebar-section:     rgba(148,163,184,.45);
  --sidebar-divider:     rgba(255,255,255,.07);

  /* ── Typography ─────────────────────────────────────────── */
  --font-family:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-size-xs:   0.75rem;    /* 12px */
  --font-size-sm:   0.875rem;   /* 14px */
  --font-size-base: 1rem;       /* 16px */
  --font-size-lg:   1.125rem;   /* 18px */
  --font-size-xl:   1.25rem;    /* 20px */
  --font-size-2xl:  1.5rem;     /* 24px */
  --font-size-3xl:  1.875rem;   /* 30px */
  --font-size-4xl:  2.25rem;    /* 36px */

  /* ── Spacing ────────────────────────────────────────────── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* ── Layout ─────────────────────────────────────────────── */
  --topbar-height:       64px;
  --sidebar-width:       248px;
  --sidebar-collapsed:   64px;
  --container-max:       1280px;
  --border-radius-sm:    6px;
  --border-radius:       10px;
  --border-radius-lg:    14px;
  --border-radius-xl:    20px;
  --border-radius-full:  9999px;

  /* ── Multi-layer Shadows (premium depth) ────────────────── */
  --shadow-xs:  0 1px 2px rgba(15,23,42,.04);
  --shadow-sm:  0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
  --shadow:     0 4px 8px rgba(15,23,42,.06), 0 2px 4px rgba(15,23,42,.04);
  --shadow-md:  0 10px 20px rgba(15,23,42,.08), 0 4px 8px rgba(15,23,42,.04);
  --shadow-lg:  0 20px 40px rgba(15,23,42,.10), 0 8px 16px rgba(15,23,42,.05);
  --shadow-xl:  0 40px 80px rgba(15,23,42,.14), 0 16px 32px rgba(15,23,42,.08);
  --shadow-inner: inset 0 2px 4px rgba(15,23,42,.06);
  --shadow-accent: 0 6px 20px rgba(37,99,235,.28);

  /* ── Transitions ─────────────────────────────────────────── */
  --transition-fast:   0.15s cubic-bezier(0.4,0,0.2,1);
  --transition:        0.25s cubic-bezier(0.4,0,0.2,1);
  --transition-slow:   0.4s  cubic-bezier(0.4,0,0.2,1);
  --transition-spring: 0.3s  cubic-bezier(0.34,1.56,0.64,1);

  /* ── Z-index ─────────────────────────────────────────────── */
  --z-topbar:   100;
  --z-sidebar:  90;
  --z-dropdown: 200;
  --z-modal:    300;
  --z-toast:    400;
}

/* ── Per-platform accent + colored shadow ─────────────────── */
.platform-shop      { --color-accent: var(--color-shop);      --shadow-accent: 0 6px 20px rgba(37,99,235,.30); }
.platform-reno      { --color-accent: var(--color-reno);      --shadow-accent: 0 6px 20px rgba(217,119,6,.30); }
.platform-transport { --color-accent: var(--color-transport); --shadow-accent: 0 6px 20px rgba(5,150,105,.30); }
.platform-design    { --color-accent: var(--color-design);    --shadow-accent: 0 6px 20px rgba(124,58,237,.30); }
.platform-designer  { --color-accent: var(--color-designer);  --shadow-accent: 0 6px 20px rgba(219,39,119,.30); }
.platform-property  { --color-accent: var(--color-property);  --shadow-accent: 0 6px 20px rgba(8,145,178,.30); }
.platform-logistic  { --color-accent: var(--color-logistic);  --shadow-accent: 0 6px 20px rgba(220,38,38,.30); }
.platform-education { --color-accent: var(--color-education); --shadow-accent: 0 6px 20px rgba(234,88,12,.30); }
.platform-travel    { --color-accent: var(--color-travel);    --shadow-accent: 0 6px 20px rgba(13,148,136,.30); }
.platform-trade     { --color-accent: var(--color-trade);     --shadow-accent: 0 6px 20px rgba(101,163,13,.30); }
.platform-job       { --color-accent: var(--color-job);       --shadow-accent: 0 6px 20px rgba(124,58,237,.30); }
.platform-app       { --color-accent: var(--color-app);       --shadow-accent: 0 6px 20px rgba(79,70,229,.30); }
.platform-forum     { --color-accent: var(--color-forum);     --shadow-accent: 0 6px 20px rgba(180,83,9,.30); }
.platform-moment    { --color-accent: var(--color-moment);    --shadow-accent: 0 6px 20px rgba(225,29,72,.30); }
.platform-admin     { --color-accent: var(--color-admin);     --shadow-accent: 0 6px 20px rgba(30,41,59,.30); }
.platform-main      { --color-accent: var(--color-main);      --shadow-accent: 0 6px 20px rgba(30,64,175,.30); }