/* =============================================================================
   variables.css — Brand Design Tokens for AfricansOnTheMove
   ============================================================================= */

:root {
    /* -------------------------------------------------------------------------
       Brand Colours
    -------------------------------------------------------------------------- */
    --brand-navy:       #061B35;
    --brand-gold:       #D9A51E;
    --brand-green:      #0F5A35;
    --brand-white:      #FFFFFF;
    --brand-charcoal:   #2B2B2B;
    --brand-light-grey: #F5F7FA;

    /* Extended palette */
    --brand-navy-deep:  #000a1e;
    --brand-navy-mid:   #002147;
    --brand-navy-light: #0d2d50;
    --brand-gold-light: #F0C84A;
    --brand-gold-dim:   #B8891A;
    --brand-green-light:#1a8a52;
    --brand-grey-100:   #FFFFFF;
    --brand-grey-200:   #F5F7FA;
    --brand-grey-250:   #F0EDED;
    --brand-grey-300:   #EAE8E7;
    --brand-grey-400:   #C4C6CF;
    --brand-grey-500:   #74777F;
    --brand-grey-600:   #44474E;
    --brand-grey-900:   #1b1c1c;
    --brand-surface:    #FBFAF8;

    /* -------------------------------------------------------------------------
       Functional Colour Tokens
    -------------------------------------------------------------------------- */
    --color-primary:          var(--brand-navy);
    --color-primary-dark:     var(--brand-navy-deep);
    --color-primary-mid:      var(--brand-navy-mid);
    --color-accent:           var(--brand-gold);
    --color-accent-hover:     var(--brand-gold-dim);
    --color-accent-light:     var(--brand-gold-light);
    --color-secondary:        var(--brand-green);
    --color-bg:               var(--brand-white);
    --color-bg-alt:           var(--brand-light-grey);
    --color-bg-surface:       var(--brand-surface);
    --color-text:             var(--brand-charcoal);
    --color-text-muted:       var(--brand-grey-600);
    --color-text-subtle:      var(--brand-grey-500);
    --color-border:           var(--brand-grey-400);
    --color-border-light:     var(--brand-grey-300);
    --color-on-primary:       var(--brand-white);
    --color-on-accent:        var(--brand-navy);

    /* -------------------------------------------------------------------------
       Workstream Accent Colours
    -------------------------------------------------------------------------- */
    --ws-policy-color:     var(--brand-navy);
    --ws-policy-bg:        #EBF1F9;
    --ws-digital-color:    var(--brand-green);
    --ws-digital-bg:       #E6F4EE;
    --ws-diaspora-color:   var(--brand-gold-dim);
    --ws-diaspora-bg:      #FDF5DC;
    --ws-remittance-color: #6B4E9E;
    --ws-remittance-bg:    #F0EBF8;

    /* -------------------------------------------------------------------------
       Typography
    -------------------------------------------------------------------------- */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

    --text-xs:   0.75rem;      /* 12px */
    --text-sm:   0.875rem;     /* 14px */
    --text-base: 1rem;         /* 16px */
    --text-lg:   1.125rem;     /* 18px */
    --text-xl:   1.25rem;      /* 20px */
    --text-2xl:  1.5rem;       /* 24px */
    --text-3xl:  2rem;         /* 32px */
    --text-4xl:  3rem;         /* 48px */

    --leading-tight:  1.2;
    --leading-snug:   1.3;
    --leading-normal: 1.5;
    --leading-relaxed:1.6;

    --tracking-tight: -0.02em;
    --tracking-snug:  -0.01em;
    --tracking-wide:  0.05em;
    --tracking-wider: 0.1em;
    --tracking-widest:0.2em;

    --fw-light:     300;
    --fw-regular:   400;
    --fw-semibold:  600;
    --fw-bold:      700;
    --fw-extrabold: 800;

    /* -------------------------------------------------------------------------
       Spacing
    -------------------------------------------------------------------------- */
    --space-xs:  0.25rem;   /*  4px */
    --space-sm:  0.5rem;    /*  8px */
    --space-md:  1rem;      /* 16px */
    --space-lg:  1.5rem;    /* 24px */
    --space-xl:  3rem;      /* 48px */
    --space-xxl: 5rem;      /* 80px */
    --gutter:    1.5rem;    /* 24px */

    /* -------------------------------------------------------------------------
       Container
    -------------------------------------------------------------------------- */
    --container-max:    1280px;
    --container-pad-xl: 4rem;      /* 64px desktop */
    --container-pad-lg: 2.5rem;    /* 40px tablet */
    --container-pad-sm: 1.25rem;   /* 20px mobile */

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

    /* -------------------------------------------------------------------------
       Shadows  (tinted with brand navy)
    -------------------------------------------------------------------------- */
    --shadow-xs: 0 1px 2px rgba(6, 27, 53, 0.06);
    --shadow-sm: 0 1px 4px rgba(6, 27, 53, 0.08), 0 1px 2px rgba(6, 27, 53, 0.04);
    --shadow-md: 0 4px 12px rgba(6, 27, 53, 0.10), 0 2px 4px rgba(6, 27, 53, 0.06);
    --shadow-lg: 0 8px 24px rgba(6, 27, 53, 0.12), 0 4px 8px rgba(6, 27, 53, 0.06);
    --shadow-xl: 0 16px 48px rgba(6, 27, 53, 0.15), 0 8px 16px rgba(6, 27, 53, 0.08);

    /* -------------------------------------------------------------------------
       Navigation
    -------------------------------------------------------------------------- */
    --nav-height: 5.25rem;  /* 84px */
    --nav-bg:     var(--brand-white);
    --nav-border: var(--color-border);

    /* -------------------------------------------------------------------------
       Transitions
    -------------------------------------------------------------------------- */
    --t-fast:   150ms ease;
    --t-base:   250ms ease;
    --t-slow:   400ms ease;
    --t-slower: 600ms ease;

    /* -------------------------------------------------------------------------
       Card dimensions
    -------------------------------------------------------------------------- */
    --card-radius:   var(--radius-lg);
    --card-pad:      1.5rem;
    --card-gap:      var(--gutter);
}