/* ============================================================
   PRICE CALCULATOR — 00-root.css
   Variabel, Reset, Layout Base, Utility
   Premium SaaS Dashboard 2026 — Linear × Stripe × Framer × Notion
   ============================================================ */

/* ============================================================
   1. CSS VARIABLES & RESET
   ============================================================ */
:root {
  /* Brand */
  --pc-blue:          #2563EB;
  --pc-blue-dark:     #1D4ED8;
  --pc-blue-deeper:   #1E40AF;
  --pc-blue-light:    #EFF6FF;
  --pc-blue-mid:      #BFDBFE;
  --pc-blue-glow:     rgba(37, 99, 235, 0.18);

  /* Accents */
  --pc-green:         #10B981;
  --pc-green-light:   #ECFDF5;
  --pc-orange:        #F59E0B;
  --pc-orange-light:  #FFFBEB;
  --pc-red:           #EF4444;
  --pc-red-light:     #FEF2F2;
  --pc-purple:        #8B5CF6;
  --pc-purple-light:  #F5F3FF;
  --pc-teal:          #0D9488;
  --pc-teal-light:    #F0FDFA;

  /* Neutrals */
  --pc-white:         #FFFFFF;
  --pc-bg:            #F7F8FC;
  --pc-bg-2:          #EFF1F7;
  --pc-border:        #E5E7EB;
  --pc-border-2:      #D1D5DB;
  --pc-text:          #0F172A;
  --pc-text-2:        #374151;
  --pc-text-3:        #6B7280;
  --pc-text-4:        #9CA3AF;
  --pc-text-5:        #CBD5E1;

  /* Sidebar */
  --pc-sidebar-bg:    #0C1525;
  --pc-sidebar-hover: #162032;
  --pc-sidebar-text:  #94A3B8;
  --pc-sidebar-w:     248px;

  /* Layout */
  --pc-topbar-h:      60px;
  --pc-content-max:   1200px;

  /* Shadows */
  --pc-shadow-xs:     0 1px 2px rgba(0,0,0,.05);
  --pc-shadow-sm:     0 1px 4px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.04);
  --pc-shadow-md:     0 4px 16px rgba(0,0,0,.08), 0 1px 4px rgba(0,0,0,.04);
  --pc-shadow-lg:     0 8px 32px rgba(0,0,0,.10), 0 2px 8px rgba(0,0,0,.06);
  --pc-shadow-xl:     0 20px 60px rgba(0,0,0,.14), 0 4px 16px rgba(0,0,0,.07);
  --pc-shadow-blue:   0 4px 20px rgba(37,99,235,.28);

  /* Radii */
  --pc-r-xs:    6px;
  --pc-r-sm:    8px;
  --pc-r-md:    12px;
  --pc-r-lg:    16px;
  --pc-r-xl:    20px;
  --pc-r-2xl:   24px;
  --pc-r-full:  9999px;

  /* Motion */
  --pc-ease:    cubic-bezier(.25,.46,.45,.94);
  --pc-spring:  cubic-bezier(.34,1.56,.64,1);
  --pc-t-fast:  .14s;
  --pc-t-base:  .22s;
  --pc-t-slow:  .38s;

  /* Font */
  --pc-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--pc-font);
  color: var(--pc-text);
  background: var(--pc-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

button { font-family: var(--pc-font); cursor: pointer; }

.page {
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Override posisi elemen admin bar WordPress */
.pc-admin-wrapper {
  margin-top: 0 !important;
}
.pc-sidebar {
  top: var(--wp-admin--admin-bar--height, 32px) !important;
}
.pc-topbar {
  top: var(--wp-admin--admin-bar--height, 32px) !important;
}
.pc-main {
  padding-top: 0 !important;
}

/* ============================================================
   37. UTILITY CLASSES
   ============================================================ */
.pc-text-blue   { color: var(--pc-blue); }
.pc-text-green  { color: var(--pc-green); }
.pc-text-orange { color: var(--pc-orange); }
.pc-text-red    { color: var(--pc-red); }
.pc-text-muted  { color: var(--pc-text-3); }
.pc-fw-bold     { font-weight: 700; }
.pc-fw-black    { font-weight: 800; }
.pc-mt-8        { margin-top: 8px; }
.pc-mt-16       { margin-top: 16px; }
.pc-mb-16       { margin-bottom: 16px; }
.pc-text-center { text-align: center; }
.pc-hidden      { display: none !important; }