/**
 * PENDU MART – CENTRAL GLOBAL DESIGN SYSTEM
 * Pure CSS Variables & Design Tokens matching UI/UX Style Guide
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
    /* ------------------------------------
     * Color Palette (CSS Variables)
     * ------------------------------------ */
    --pm-primary: #1E6B3A;
    --pm-primary-dark: #15522C;
    --pm-primary-light: #EAF6EE;

    --pm-secondary: #F59E0B;
    --pm-secondary-dark: #D97706;
    --pm-secondary-light: #FEF3C7;

    --pm-accent: #FF6B35;
    --pm-accent-dark: #E0531D;
    --pm-accent-light: #FFF1EA;

    --pm-heading: #0F172A;
    --pm-text: #1F2937;
    --pm-muted: #6B7280;
    --pm-light: #F8FAFB;
    --pm-background: #FFFFFF;
    --pm-card: #FFFFFF;
    --pm-border: #E5E7EB;
    --pm-border-light: #F3F4F6;

    --pm-success: #16803A;
    --pm-danger: #DC2626;
    --pm-warning: #F59E0B;
    --pm-info: #2563EB;

    /* ------------------------------------
     * Typography System
     * ------------------------------------ */
    --pm-font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    --pm-font-heading: var(--pm-font-primary);

    --pm-font-h1: 48px;
    --pm-line-h1: 56px;
    --pm-weight-h1: 700;

    --pm-font-h2: 36px;
    --pm-line-h2: 44px;
    --pm-weight-h2: 700;

    --pm-font-h3: 24px;
    --pm-line-h3: 32px;
    --pm-weight-h3: 600;

    --pm-font-h4: 20px;
    --pm-line-h4: 28px;
    --pm-weight-h4: 600;

    --pm-font-h5: 18px;
    --pm-line-h5: 26px;
    --pm-weight-h5: 500;

    --pm-font-body: 16px;
    --pm-line-body: 24px;
    --pm-weight-body: 400;

    --pm-font-small: 14px;
    --pm-line-small: 20px;

    --pm-font-caption: 12px;
    --pm-line-caption: 18px;

    /* ------------------------------------
     * Spacing (8px Modular Scale)
     * ------------------------------------ */
    --pm-space-xs: 4px;
    --pm-space-sm: 8px;
    --pm-space-md: 12px;
    --pm-space-base: 16px;
    --pm-space-lg: 24px;
    --pm-space-xl: 32px;
    --pm-space-2xl: 48px;
    --pm-space-3xl: 64px;

    /* ------------------------------------
     * Border Radius
     * ------------------------------------ */
    --pm-radius-sm: 6px;
    --pm-radius-default: 8px;
    --pm-radius-md: 12px;
    --pm-radius-lg: 16px;
    --pm-radius-full: 9999px;

    /* ------------------------------------
     * Shadows
     * ------------------------------------ */
    --pm-shadow-light: 0 1px 3px rgba(0, 0, 0, 0.05);
    --pm-shadow-default: 0 2px 8px rgba(0, 0, 0, 0.08);
    --pm-shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.12);
    --pm-shadow-card: 0 2px 10px rgba(0, 0, 0, 0.04);

    /* ------------------------------------
     * Layout Container
     * ------------------------------------ */
    --pm-container-max: 1440px;
    --pm-container-padding: 20px;

    /* ------------------------------------
     * Transitions
     * ------------------------------------ */
    --pm-transition-fast: 0.15s ease-in-out;
    --pm-transition-base: 0.25s ease-in-out;
}

/* Base resets & typography */
body {
    font-family: var(--pm-font-primary);
    font-size: var(--pm-font-body);
    line-height: var(--pm-line-body);
    color: var(--pm-text);
    background-color: var(--pm-light);
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--pm-font-heading);
    color: var(--pm-heading);
    margin-top: 0;
    font-weight: 700;
}

h1 { font-size: var(--pm-font-h1); line-height: var(--pm-line-h1); font-weight: var(--pm-weight-h1); }
h2 { font-size: var(--pm-font-h2); line-height: var(--pm-line-h2); font-weight: var(--pm-weight-h2); }
h3 { font-size: var(--pm-font-h3); line-height: var(--pm-line-h3); font-weight: var(--pm-weight-h3); }
h4 { font-size: var(--pm-font-h4); line-height: var(--pm-line-h4); font-weight: var(--pm-weight-h4); }
h5 { font-size: var(--pm-font-h5); line-height: var(--pm-line-h5); font-weight: var(--pm-weight-h5); }

a {
    color: var(--pm-primary);
    text-decoration: none;
    transition: color var(--pm-transition-fast);
}

a:hover {
    color: var(--pm-primary-dark);
}

.pm-container {
    max-width: var(--pm-container-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--pm-container-padding);
    padding-right: var(--pm-container-padding);
    box-sizing: border-box;
}

/* Global Reusable Buttons */
.pm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--pm-font-primary);
    font-size: var(--pm-font-small);
    font-weight: 600;
    padding: 10px 20px;
    border-radius: var(--pm-radius-default);
    cursor: pointer;
    border: 1px solid transparent;
    transition: all var(--pm-transition-fast);
    text-decoration: none;
    line-height: 1.2;
}

.pm-btn-primary {
    background-color: var(--pm-primary);
    color: #ffffff !important;
}

.pm-btn-primary:hover {
    background-color: var(--pm-primary-dark);
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: var(--pm-shadow-default);
}

.pm-btn-secondary {
    background-color: var(--pm-accent);
    color: #ffffff !important;
}

.pm-btn-secondary:hover {
    background-color: var(--pm-accent-dark);
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: var(--pm-shadow-default);
}

.pm-btn-outline {
    background-color: transparent;
    color: var(--pm-text) !important;
    border-color: var(--pm-border);
}

.pm-btn-outline:hover {
    border-color: var(--pm-primary);
    color: var(--pm-primary) !important;
    background-color: var(--pm-primary-light);
}

.pm-btn-text {
    background: transparent;
    color: var(--pm-primary) !important;
    padding: 8px 12px;
}

.pm-btn-text:hover {
    color: var(--pm-primary-dark) !important;
}

.pm-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    font-size: 11px;
    font-weight: 700;
    border-radius: var(--pm-radius-sm);
    line-height: 1;
}

.pm-badge-discount {
    background-color: #EF4444;
    color: #ffffff;
}

.pm-badge-success {
    background-color: var(--pm-primary-light);
    color: var(--pm-primary);
}