/* ============================================================================
   CSS Variables - Theme Design Tokens
   ============================================================================ */

:root {
    /* Palette */
    --ptasi-primary: #EC2526; /* Drivschol red */
    --ptasi-primary-rgb: 236 37 38;
    --ptasi-primary-light: #FF5C5D;
    --ptasi-primary-dark: #C41F20;

    --ptasi-secondary: #1A1A1A; /* Deep black */
    --ptasi-secondary-rgb: 26 26 26;
    --ptasi-secondary-light: #404040;

    --ptasi-background: #F8F8F8;
    --ptasi-background-alt: #FFFFFF;
    --ptasi-background-rgb: 248 248 248;
    --ptasi-surface: #FFFFFF;
    --ptasi-surface-rgb: 255 255 255;

    --ptasi-text: #111117; /* Dark navy for headings */
    --ptasi-text-rgb: 17 17 23;
    --ptasi-muted: #6D7076; /* Medium gray for body text */
    --ptasi-muted-rgb: 109 112 118;
    --ptasi-light: #E0E0E0;
    --ptasi-light-rgb: 224 224 224;

    --ptasi-accent: #EC2526; /* Consistent red accent */
    --ptasi-accent-rgb: 236 37 38;
    --ptasi-accent-dark: #C41F20;
    --ptasi-highlight: #EC2526; /* Use red for highlights */
    --ptasi-highlight-rgb: 236 37 38;
    --ptasi-highlight-text: #FFFFFF;

    /* Layout */
    --ptasi-width-content: 1180px;      /* Default content width for most sections */
    --ptasi-width-full: 1920px;         /* Full-width sections (capped maximum) */
    --ptasi-max-width: var(--ptasi-width-content);  /* Alias for backward compatibility */
    --ptasi-container-inset: clamp(1.5rem, 4vw, 2rem);

    /* Spacing Scale - Tailwind-inspired (4px base) */
    /* Base scale - Fixed values for consistent spacing */
    --space-1: 0.25rem;   /* 4px */
    --space-2: 0.5rem;    /* 8px */
    --space-3: 0.75rem;   /* 12px */
    --space-4: 1rem;      /* 16px */
    --space-5: 1.25rem;   /* 20px */
    --space-6: 1.5rem;    /* 24px */
    --space-8: 2rem;      /* 32px */
    --space-10: 2.5rem;   /* 40px */
    --space-12: 3rem;     /* 48px */
    --space-16: 4rem;     /* 64px */
    --space-20: 5rem;     /* 80px */
    --space-24: 6rem;     /* 96px */
    --space-32: 8rem;     /* 128px */

    /* Semantic spacing - Named by context */
    --space-xs: var(--space-2);    /* 8px - Tight elements */
    --space-sm: var(--space-4);    /* 16px - Default spacing */
    --space-md: var(--space-6);    /* 24px - Comfortable spacing */
    --space-lg: var(--space-8);    /* 32px - Generous spacing */
    --space-xl: var(--space-12);   /* 48px - Section spacing */
    --space-2xl: var(--space-16);  /* 64px - Large sections */
    --space-3xl: var(--space-20);  /* 80px - Hero spacing */

    /* Context-specific spacing - Unified spacing system */
    --space-section: var(--space-12);           /* 48px - Section padding */
    --space-hero: var(--space-12);              /* 48px - Hero to content (user preference) */
    --space-between-blocks: var(--space-10);    /* 40px - Block spacing */

    /* Legacy variables (deprecated - kept for backwards compatibility) */
    --ptasi-section-padding: var(--space-20);          /* 80px - Use --space-section instead */
    --ptasi-section-padding-tight: var(--space-16);    /* 64px - Use --space-2xl instead */
    --ptasi-gap-sm: var(--space-md);                   /* 24px - Use --space-md instead */
    --ptasi-gap-md: var(--space-lg);                   /* 32px - Use --space-lg instead */
    --ptasi-gap-lg: var(--space-xl);                   /* 48px - Use --space-xl instead */

    /* Radius & Shadow */
    --ptasi-radius-sm: 0;
    --ptasi-radius: 0;
    --ptasi-radius-lg: 0;
    --ptasi-radius-pill: 0;
    --ptasi-border: 1px solid rgb(var(--ptasi-light-rgb) / 0.6);
    --ptasi-soft-border: 1px solid rgb(var(--ptasi-secondary-rgb) / 0.1);
    --ptasi-shadow-xs: 0 3px 18px rgba(0, 0, 0, 0.07);
    --ptasi-shadow-sm: 0 6px 30px rgba(0, 0, 0, 0.08);
    --ptasi-shadow-md: 4px 4px 40px rgba(0, 0, 0, 0.1);
    --ptasi-shadow-lg: 0 10px 60px rgba(0, 0, 0, 0.12);
    --ptasi-shadow-hover: 6px 6px 30px rgba(0, 0, 0, 0.08);

    /* Typography */
    --ptasi-font-family: var(--wp--preset--font-family--montserrat, "Montserrat", "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif);
    --ptasi-text-xs: 0.75rem;
    --ptasi-text-sm: 0.875rem;
    --ptasi-text-base: 1rem;
    --ptasi-text-lg: 1.25rem;
    --ptasi-text-xl: 1.5rem;
    --ptasi-text-2xl: 1.875rem;
    --ptasi-text-3xl: 2.25rem;
    --ptasi-text-4xl: 3rem;
    --ptasi-text-5xl: 3.5rem;

    --ptasi-font-regular: 400;
    --ptasi-font-semibold: 600;
    --ptasi-font-bold: 700;
    --ptasi-font-black: 800;

    --ptasi-transition-fast: 140ms ease;
    --ptasi-transition: 220ms ease;

    /* Harmonious Solid Color Palette for Buttons */
    --ptasi-button-primary: #EC2526;
    --ptasi-button-primary-rgb: 236 37 38;
    --ptasi-button-primary-hover: #FF5C5D;
    --ptasi-button-primary-active: #C41F20;

    --ptasi-button-secondary: #3D3D3D;
    --ptasi-button-secondary-rgb: 61 61 61;
    --ptasi-button-secondary-hover: #585858;

    --ptasi-button-accent: #EC2526;
    --ptasi-button-accent-rgb: 236 37 38;

    --ptasi-button-transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
    --ptasi-button-transition-fast: all 220ms cubic-bezier(0.4, 0, 0.2, 1);

    --ptasi-button-shadow-default: 0 2px 6px rgba(61, 61, 61, 0.16), 0 1px 3px rgba(236, 37, 38, 0.1);
    --ptasi-button-shadow-hover: 0 8px 20px rgba(61, 61, 61, 0.24), 0 4px 8px rgba(236, 37, 38, 0.18), 0 2px 4px rgba(236, 37, 38, 0.15);
    --ptasi-button-shadow-active: 0 2px 8px rgba(61, 61, 61, 0.3), 0 1px 4px rgba(236, 37, 38, 0.2);

    /* Accent Colors */
    --ptasi-frost: #ECEFF4;
    --ptasi-frost-rgb: 236, 239, 244;
    --ptasi-nordost: #8FBCBB;
    --ptasi-nordost-rgb: 143, 188, 187;
    --ptasi-light-bg: #f1f2f4;
    --ptasi-light-bg-rgb: 241, 242, 244;

    /* Responsive Breakpoints */
    --breakpoint-mobile: 768px;
    --breakpoint-tablet: 1024px;
    --breakpoint-desktop: 1280px;
}

/* Responsive Section Padding (match template) */
@media (min-width: 769px) and (max-width: 1024px) {
    :root {
        --ptasi-section-padding: 80px;
    }
}

@media (max-width: 768px) {
    :root {
        --ptasi-section-padding: 80px;
    }
}