/* ======================================
      POWERPRESS STYLING VARIABLES
   ======================================

   Load this file BEFORE admin.css and settings.css.

   TABLE OF CONTENTS
   -----------------
   1. COLORS - PRIMARY
   2. COLORS - SEMANTIC
   3. COLORS - STATS WIDGET
   4. COLORS - NEUTRAL
   5. COLORS - BORDERS & BLUES
   6. COLORS - WP ADMIN
   7. TYPOGRAPHY
   8. SPACING
   9. BORDERS
   10. SHADOWS
   11. TRANSITIONS
   12. SKELETON
   13. UTILITY CLASSES

   ====================================== */

:root {

    /* =====================
         1. COLORS - PRIMARY
       ===================== */

    --pp-color-primary: #0B43A4;
    --pp-color-primary-hover: #093785;
    --pp-color-primary-light: #e2e8f0;
    --pp-color-primary-soft: #6B9AE8;
    --pp-color-primary-muted: #8FB3ED;
    --pp-color-primary-dark: #093785;
    --pp-color-secondary: #1976d2;
    --pp-color-accent: #1a6deb;
    --pp-color-accent-soft: #b39ddb;
    --pp-color-accent-light: #faf7fc;

    /* ======================
         2. COLORS - SEMANTIC
       ====================== */

    --pp-color-success: #66BB6A;
    --pp-color-warning: #FFA726;
    --pp-color-danger: #EF5350;
    --pp-color-info: #42A5F5;
    --pp-color-highlight: #AB47BC;

    /* ==========================
         3. COLORS - STATS WIDGET
       ========================== */

    --pp-stats-today: var(--pp-color-highlight);
    --pp-stats-average: var(--pp-color-info);
    --pp-stats-total: var(--pp-color-success);

    /* =====================
         4. COLORS - NEUTRAL
       ===================== */

    --pp-color-white: #ffffff;
    --pp-color-gray-50: #f8f9fa;
    --pp-color-gray-100: #f0f0f1;
    --pp-color-gray-200: #eee;
    --pp-color-gray-300: #ddd;
    --pp-color-gray-400: #ccc;
    --pp-color-gray-500: #999;
    --pp-color-gray-600: #666;
    --pp-color-gray-700: #555;
    --pp-color-gray-800: #333;
    --pp-color-gray-900: #1d2327;

    /* ============================
         5. COLORS - BORDERS & BLUES
       ============================ */

    --pp-border-light: #EFF0F5;
    --pp-color-blue-100: #f8faff;
    --pp-color-blue-200: #e0edff;
    --pp-color-blue-300: #d0e3ff;

    /* ======================
         6. COLORS - WP ADMIN
       ====================== */

    --pp-wp-border: #c3c4c7;
    --pp-wp-border-hover: #8c8f94;
    --pp-wp-bg-hover: #e0e0e1;
    --pp-wp-link: #0073aa;
    --pp-color-navy: #003366;

    /* ================
         7. TYPOGRAPHY
       ================ */

    --pp-font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --pp-font-size-xs: 11px;
    --pp-font-size-sm: 12px;
    --pp-font-size-base: 14px;
    --pp-font-size-md: 16px;
    --pp-font-size-lg: 18px;
    --pp-font-size-xl: 20px;
    --pp-font-size-2xl: 24px;

    /* =============
         8. SPACING
       ============= */

    --pp-spacing-xs: 4px;
    --pp-spacing-sm: 8px;
    --pp-spacing-md: 12px;
    --pp-spacing-lg: 16px;
    --pp-spacing-xl: 24px;
    --pp-spacing-2xl: 32px;

    /* =============
         9. BORDERS
       ============= */

    --pp-border-radius: 4px;
    --pp-border-radius-md: 8px;
    --pp-border-radius-lg: 12px;
    --pp-border-radius-pill: 20px;
    --pp-border-color: var(--pp-color-gray-300);
    --pp-border: 1px solid var(--pp-border-color);

    /* =============
         10. SHADOWS
       ============= */

    --pp-shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --pp-shadow-md: 0 1px 3px rgba(0,0,0,0.1);
    --pp-shadow-lg: 0 4px 6px rgba(0,0,0,0.1);

    /* ==================
         11. TRANSITIONS
       ================== */

    --pp-transition-fast: 0.15s ease-in-out;
    --pp-transition: 0.3s ease-in-out;

    /* ===============
         12. SKELETON
       =============== */

    --pp-skeleton-light: #f0f0f0;
    --pp-skeleton-mid: #e0e0e0;

}


/* ======================
     13. UTILITY CLASSES
   ====================== */

/*
 * Standard Bootstrap-style utilities.
 * Note: d-flex, d-none, flex-wrap, justify-content-*, align-items-*
 * are provided by bootstrap-grid.css - don't duplicate here.
 */

/* custom flex shortcuts (keep pp- prefix for compound utilities) */
.pp-flex-center { display: flex !important; align-items: center !important; justify-content: center !important; }
.pp-flex-between { display: flex !important; align-items: center !important; justify-content: space-between !important; }
.pp-flex-col { flex-direction: column !important; }
.pp-flex-1 { flex: 1 !important; }
.gap-sm { gap: var(--pp-spacing-sm) !important; }
.gap-md { gap: var(--pp-spacing-md) !important; }
.gap-lg { gap: var(--pp-spacing-lg) !important; }
.h-100 { height: 100% !important; }
.h-auto { height: auto !important; }
.w-100 { width: 100% !important; }
.w-auto { width: auto !important; }
.mt-auto { margin-top: auto !important; }

/* text */
.text-center { text-align: center !important; }
.text-left { text-align: left !important; }
.text-right { text-align: right !important; }
.pp-text-primary { color: var(--pp-color-primary) !important; }
.pp-text-muted { color: var(--pp-color-gray-600) !important; }

/* vertical align */
.align-top { vertical-align: top !important; }

/* margin - using rem values for Bootstrap compatibility */
.m-0 { margin: 0 !important; }
.mt-2 { margin-top: 0.5rem !important; }
.mt-3 { margin-top: 1rem !important; }
.mt-4 { margin-top: 1.5rem !important; }
.mr-2 { margin-right: 0.5rem !important; }
.mr-4 { margin-right: 1.5rem !important; }
.mb-2 { margin-bottom: 0.5rem !important; }
.mb-3 { margin-bottom: 1rem !important; }
.mb-4 { margin-bottom: 1.5rem !important; }
.mb-5 { margin-bottom: 3rem !important; }
.ml-0 { margin-left: 0 !important; }
.mr-0 { margin-right: 0 !important; }

/* padding */
.p-0 { padding: 0 !important; }
.p-2 { padding: 0.5rem !important; }
.p-3 { padding: 1rem !important; }
.p-4 { padding: 1.5rem !important; }

.pl-0 { padding-left: 0 !important; }
.pl-2 { padding-left: 0.5rem !important; }
.pl-3 { padding-left: 1rem !important; }
.pl-4 { padding-left: 1.5rem !important; }

.pr-0 { padding-right: 0 !important; }
.pr-2 { padding-right: 0.5rem !important; }
.pr-3 { padding-right: 1rem !important; }
.pr-4 { padding-right: 1.5rem !important; }