/* ============================================================
   PainHunting Design Tokens
   ============================================================ */

:root {

    /* --- Brand Colors --- */
    --ph-green:          #469F10;
    --ph-green-dark:     #357D0C;
    --ph-green-light:    #EBF5E1;
    --ph-green-bg:       #EAF5E5;

    /* --- Neutrals --- */
    --ph-black:          #333333;
    --ph-gray-dark:      #2D2D2D;
    --ph-gray:           #555555;
    --ph-gray-mid:       #9CA3AF;
    --ph-gray-light:     #E5E7EB;
    --ph-gray-bg:        #F9FAFB;
    --ph-white:          #FFFFFF;

    /* --- Footer --- */
    --ph-footer-bg:      #1A3A0F;
    --ph-footer-text:    #D1E8C5;

    /* --- Semantic --- */
    --ph-border:         #E5E7EB;
    --ph-border-dark:    #2D2D2D;
    --ph-border-radius:  10px;
    --ph-border-radius-sm: 6px;
    --ph-border-radius-pill: 50px;

    /* --- Typography --- */
    --ph-font-body:           'Inter', sans-serif;
    --ph-font-heading:   'Inter', sans-serif;
    --ph-font-custom:   'Inter', sans-serif;
    --ph-font-size-base: 16px;

    /* Heading scale */
    --ph-h1:  clamp(40px, 5vw, 64px);
    --ph-h2:  clamp(28px, 3.5vw, 44px);
    --ph-h3:  clamp(20px, 2.5vw, 28px);
    --ph-h4:  20px;
    --ph-h5:  18px;
    --ph-h6:  16px;

    /* Body scale */
    --ph-text-lg:  18px;
    --ph-text-md:  16px;
    --ph-text-sm:  14px;
    --ph-text-xs:  12px;

    /* Font weights */
    --ph-fw-regular: 400;
    --ph-fw-medium:  500;
    --ph-fw-semi:    600;
    --ph-fw-bold:    700;
    --ph-fw-extra:   800;

    /* --- Spacing --- */
    --ph-space-xs:   8px;
    --ph-space-sm:   16px;
    --ph-space-md:   24px;
    --ph-space-lg:   48px;
    --ph-space-xl:   80px;
    --ph-space-xxl:  120px;

    /* --- Shadows --- */
    --ph-shadow-sm:  0 1px 3px rgba(0,0,0,0.08);
    --ph-shadow-md:  0 4px 16px rgba(0,0,0,0.08);
    --ph-shadow-lg:  0 8px 32px rgba(0,0,0,0.10);
    --ph-shadow-card: 0 2px 12px rgba(70,159,16,0.08);
    --ph-shadow-div: 0 1px 2px rgba(70,159,16,0.03);

    /* --- Container --- */
    --ph-container:  1280px;
    --ph-container-sm: 800px;

    /* --- Transitions --- */
    --ph-transition: 0.22s ease;
}