/**
 * =========================================================
 * PERTECNICA HOMEPAGE ENGINE
 * ENTERPRISE DESIGN TOKEN SYSTEM
 * =========================================================
 * 
 * PURPOSE:
 * Centralized visual governance layer
 * 
 * CONTROLS:
 * - spacing
 * - typography
 * - colors
 * - shadows
 * - radius
 * - transitions
 * - z-index
 * - layout widths
 * 
 * IMPORTANT:
 * Never use hardcoded repeated values in section CSS.
 * Always consume variables from this file.
 * 
 * =========================================================
 */

:root {

    /* =====================================================
       SPACING SYSTEM
    ===================================================== */

    --phe-space-3xs: 2px;
    --phe-space-2xs: 4px;
    --phe-space-xs: 8px;
    --phe-space-sm: 12px;
    --phe-space-md: 16px;
    --phe-space-lg: 24px;
    --phe-space-xl: 32px;
    --phe-space-2xl: 48px;
    --phe-space-3xl: 64px;
    --phe-space-4xl: 80px;
    --phe-space-5xl: 120px;


    /* =====================================================
       CONTAINER WIDTHS
    ===================================================== */

    --phe-container-xs: 480px;
    --phe-container-sm: 768px;
    --phe-container-md: 1024px;
    --phe-container-lg: 1200px;
    --phe-container-xl: 1320px;


    /* =====================================================
       TYPOGRAPHY SCALE
    ===================================================== */

    --phe-text-xs: 12px;
    --phe-text-sm: 14px;
    --phe-text-md: 16px;
    --phe-text-lg: 18px;
    --phe-text-xl: 20px;
    --phe-text-2xl: 28px;
    --phe-text-3xl: 36px;
    --phe-text-4xl: 48px;
    --phe-text-5xl: 64px;


    /* =====================================================
       FONT WEIGHTS
    ===================================================== */

    --phe-font-light: 300;
    --phe-font-regular: 400;
    --phe-font-medium: 500;
    --phe-font-semibold: 600;
    --phe-font-bold: 700;
    --phe-font-extrabold: 800;


    /* =====================================================
       LINE HEIGHTS
    ===================================================== */

    --phe-line-tight: 1.1;
    --phe-line-snug: 1.3;
    --phe-line-normal: 1.6;
    --phe-line-relaxed: 1.8;


    /* =====================================================
       COLOR SYSTEM
    ===================================================== */

    /* Brand */

    --phe-primary: #0B57D0;
    --phe-primary-dark: #084298;
    --phe-primary-light: #DCE8FF;

    /* Text */

    --phe-text-primary: #111827;
    --phe-text-secondary: #4B5563;
    --phe-text-muted: #6B7280;
    --phe-text-light: #9CA3AF;

    /* Backgrounds */

    --phe-bg-white: #FFFFFF;
    --phe-bg-light: #F8FAFC;
    --phe-bg-soft: #F1F5F9;
    --phe-bg-dark: #0F172A;

    /* Borders */

    --phe-border-light: #E5E7EB;
    --phe-border-medium: #D1D5DB;
    --phe-border-dark: #9CA3AF;

    /* Semantic */

    --phe-success: #16A34A;
    --phe-warning: #F59E0B;
    --phe-danger: #DC2626;
    --phe-info: #0284C7;


    /* =====================================================
       SHADOW SYSTEM
    ===================================================== */

    --phe-shadow-xs:
        0 1px 2px rgba(0, 0, 0, 0.04);

    --phe-shadow-sm:
        0 2px 8px rgba(0, 0, 0, 0.06);

    --phe-shadow-md:
        0 10px 30px rgba(0, 0, 0, 0.08);

    --phe-shadow-lg:
        0 20px 50px rgba(0, 0, 0, 0.12);

    --phe-shadow-xl:
        0 30px 80px rgba(0, 0, 0, 0.16);


    /* =====================================================
       BORDER RADIUS SYSTEM
    ===================================================== */

    --phe-radius-xs: 4px;
    --phe-radius-sm: 8px;
    --phe-radius-md: 14px;
    --phe-radius-lg: 20px;
    --phe-radius-xl: 28px;
    --phe-radius-full: 999px;


    /* =====================================================
       TRANSITION SYSTEM
    ===================================================== */

    --phe-transition-fast:
        all 0.2s ease;

    --phe-transition-base:
        all 0.35s ease;

    --phe-transition-slow:
        all 0.5s ease;


    /* =====================================================
       Z-INDEX GOVERNANCE
    ===================================================== */

    --phe-z-base: 1;
    --phe-z-dropdown: 100;
    --phe-z-sticky: 500;
    --phe-z-overlay: 900;
    --phe-z-modal: 1000;
    --phe-z-loader: 9999;


    /* =====================================================
       SECTION GOVERNANCE
    ===================================================== */

    --phe-section-padding-y: 100px;
    --phe-section-padding-y-tablet: 80px;
    --phe-section-padding-y-mobile: 60px;

    --phe-section-gap: 40px;


    /* =====================================================
       CARD GOVERNANCE
    ===================================================== */

    --phe-card-padding: 32px;
    --phe-card-padding-mobile: 24px;

    --phe-card-radius: var(--phe-radius-lg);
    --phe-card-shadow: var(--phe-shadow-md);


    /* =====================================================
       BUTTON GOVERNANCE
    ===================================================== */

    --phe-button-height: 52px;
    --phe-button-padding-x: 28px;
    --phe-button-radius: var(--phe-radius-full);

}