/* ============================================================
   ePost Caribbean — Design Tokens
   ============================================================ */
:root {
    /* Brand colours */
    --color-primary:        #0E7490;   /* Caribbean deep teal */
    --color-primary-dark:   #0C5F75;
    --color-primary-light:  #22BFDD;
    --color-primary-muted:  rgba(14, 116, 144, 0.08);

    --color-dark:           #1A1A1A;
    --color-dark-secondary: #3D3D3D;
    --color-mid:            #6B7280;
    --color-border:         #E5E7EB;
    --color-light:          #F5F5F5;
    --color-lighter:        #FAFAFA;
    --color-white:          #FFFFFF;

    /* Typography */
    --font-family:          'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-size-xs:         0.75rem;     /* 12px */
    --font-size-sm:         0.875rem;    /* 14px */
    --font-size-base:       1rem;        /* 16px */
    --font-size-md:         1.125rem;    /* 18px */
    --font-size-lg:         1.25rem;     /* 20px */
    --font-size-xl:         1.5rem;      /* 24px */
    --font-size-2xl:        1.875rem;    /* 30px */
    --font-size-3xl:        2.25rem;     /* 36px */
    --font-size-4xl:        3rem;        /* 48px */
    --font-size-5xl:        3.75rem;     /* 60px */

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

    --line-height-tight:    1.2;
    --line-height-snug:     1.375;
    --line-height-normal:   1.5;
    --line-height-relaxed:  1.625;
    --line-height-loose:    2;

    /* Spacing scale */
    --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 */

    /* Section padding */
    --section-py:           var(--space-20);
    --section-py-sm:        var(--space-12);

    /* Layout */
    --container-max:        1200px;
    --container-md:         960px;
    --container-sm:         720px;
    --container-px:         var(--space-6);

    /* Border radius */
    --radius-sm:    0.25rem;
    --radius-md:    0.5rem;
    --radius-lg:    0.75rem;
    --radius-xl:    1rem;
    --radius-2xl:   1.5rem;
    --radius-full:  9999px;

    /* Shadows */
    --shadow-sm:    0 1px 2px 0 rgba(0,0,0,0.05);
    --shadow-md:    0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
    --shadow-lg:    0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
    --shadow-xl:    0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1);
    --shadow-pink:  0 8px 24px rgba(14,116,144,0.25);

    /* Transitions */
    --transition-fast:   150ms ease;
    --transition-base:   250ms ease;
    --transition-slow:   400ms ease;

    /* Z-index scale */
    --z-base:       1;
    --z-dropdown:   100;
    --z-sticky:     200;
    --z-overlay:    300;
    --z-modal:      400;
    --z-toast:      500;

    /* Header */
    --header-height:  72px;
}