/* ==========================================================================
   Tawala Design Tokens — single source of truth
   Phase B.1 · 2026-04-28
   --------------------------------------------------------------------------
   Use these CSS custom properties everywhere instead of hex literals.
   Mirror values are exposed to Tailwind via tailwind.config.js (theme.extend).
   ========================================================================== */

:root {
    /* ---------- Brand color ramp (mirrors tailwind.config.js theme.extend.colors.primary) ---------- */
    --color-brand-50:  #F4F2FF;
    --color-brand-100: #E5DEFF;
    --color-brand-200: #C9BFFC;
    --color-brand-300: #A99CFA;
    --color-brand-400: #897BF2;
    --color-brand-500: #635BFF;   /* canonical primary */
    --color-brand-600: #5851DB;
    --color-brand-700: #4A45B7;
    --color-brand-800: #3D3A93;
    --color-brand-900: #0A2540;

    /* ---------- Neutrals ---------- */
    --color-ink:       #0A2540;   /* primary text on light bg */
    --color-body:      #425466;   /* body text / muted */
    --color-subtle:    #8898AA;
    --color-border:    #E3E8EE;
    --color-divider:   #ECEFF5;
    --color-bg:        #F6F9FC;   /* page background */
    --color-surface:   #FFFFFF;
    --color-overlay:   rgba(26, 31, 54, 0.6);

    /* ---------- Status (mirrors tailwind.config.js) ---------- */
    --color-success-50:  #ECFDF5;
    --color-success-100: #D1FAE5;
    --color-success-500: #2A9968;
    --color-success-600: #1F7B53;
    --color-success-700: #047857;
    --color-warning-50:  #FFFBEB;
    --color-warning-500: #DDAE13;
    --color-warning-600: #B8920F;
    --color-danger-50:   #FEF2F2;
    --color-danger-500:  #DF4F32;
    --color-danger-600:  #C04023;
    --color-info-50:     #EFF6FF;
    --color-info-500:    #3B82F6;

    /* ---------- Tanzania-flag accents (used sparingly) ---------- */
    --color-tz-green:  #1EB53A;
    --color-tz-yellow: #FCD116;
    --color-tz-blue:   #00A3DD;
    --color-tz-black:  #000000;

    /* ---------- Typography ---------- */
    --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

    --fs-xs:   0.75rem;   /* 12 */
    --fs-sm:   0.875rem;  /* 14 */
    --fs-base: 1rem;      /* 16 */
    --fs-lg:   1.125rem;  /* 18 */
    --fs-xl:   1.25rem;   /* 20 */
    --fs-2xl:  1.5rem;    /* 24 */
    --fs-3xl:  1.875rem;  /* 30 */
    --fs-4xl:  2.25rem;   /* 36 */
    --fs-5xl:  3rem;      /* 48 */
    --fs-6xl:  3.75rem;   /* 60 */

    --lh-tight:   1.15;
    --lh-snug:    1.3;
    --lh-normal:  1.5;
    --lh-relaxed: 1.65;

    /* ---------- Spacing scale (matches Tailwind) ---------- */
    --space-1:  0.25rem;
    --space-2:  0.5rem;
    --space-3:  0.75rem;
    --space-4:  1rem;
    --space-5:  1.25rem;
    --space-6:  1.5rem;
    --space-8:  2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;

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

    /* ---------- Shadow ---------- */
    --shadow-card:    0 1px 3px rgba(16, 24, 40, .06), 0 1px 2px rgba(16, 24, 40, .10);
    --shadow-card-h:  0 8px 24px rgba(16, 24, 40, .08), 0 2px 8px rgba(16, 24, 40, .06);
    --shadow-pop:     0 4px 12px rgba(16, 24, 40, .08);
    --shadow-modal:   0 24px 48px rgba(16, 24, 40, .18);

    /* ---------- Motion ---------- */
    --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in:   cubic-bezier(0.4, 0, 1, 1);
    --dur-fast:  150ms;
    --dur-base:  220ms;
    --dur-slow:  400ms;

    /* ---------- Layout ---------- */
    --container-max:  90rem;       /* 1440px */
    --container-text: 42rem;       /* 672px — long-form reading width */
    --header-h:       4.5rem;      /* 72px */
}

/* Reduce-motion respect */
@media (prefers-reduced-motion: reduce) {
    :root {
        --dur-fast: 0ms;
        --dur-base: 0ms;
        --dur-slow: 0ms;
    }
}

/* ==========================================================================
   Aliases (back-compat with the legacy class names used across pages)
   --------------------------------------------------------------------------
   These let existing class="text-primary-500", "text-dark", "text-body" keep
   working while we migrate to brand-* tokens incrementally.
   ========================================================================== */

.text-primary-500   { color: var(--color-brand-500) !important; }
.text-primary-600   { color: var(--color-brand-600) !important; }
.bg-primary-500     { background-color: var(--color-brand-500) !important; }
.bg-primary-50      { background-color: var(--color-brand-50) !important; }
.border-primary-500 { border-color: var(--color-brand-500) !important; }
.text-dark          { color: var(--color-ink) !important; }
.text-body          { color: var(--color-body) !important; }
.text-subtle        { color: var(--color-subtle) !important; }
.bg-bg              { background-color: var(--color-bg) !important; }
.border-border      { border-color: var(--color-border) !important; }
.text-success-500   { color: var(--color-success-500) !important; }
.bg-success-50      { background-color: var(--color-success-50) !important; }

/* ==========================================================================
   Component primitives
   ========================================================================== */

.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    border-radius: var(--radius-md);
    background: var(--color-brand-500);
    color: var(--color-surface);
    font-weight: 600;
    text-decoration: none;
    box-shadow: var(--shadow-card);
    transition: background var(--dur-base) var(--ease-out),
                transform var(--dur-fast) var(--ease-out);
}
.btn-primary:hover { background: var(--color-brand-600); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); }

.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-brand-600);
    border: 2px solid var(--color-brand-500);
    font-weight: 600;
    text-decoration: none;
    transition: background var(--dur-base) var(--ease-out);
}
.btn-secondary:hover { background: var(--color-brand-50); }

.btn-whatsapp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    border-radius: var(--radius-md);
    background: #25D366;          /* WhatsApp brand green — exception to token rule */
    color: #FFFFFF;
    font-weight: 600;
    text-decoration: none;
    box-shadow: var(--shadow-card);
    transition: background var(--dur-base) var(--ease-out);
}
.btn-whatsapp:hover { background: #1DA856; }

/* Sticky mobile-only WhatsApp FAB (used by Phase H) */
.wa-fab {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: var(--radius-full);
    background: #25D366;
    color: #FFFFFF;
    box-shadow: var(--shadow-pop);
    text-decoration: none;
    transition: transform var(--dur-base) var(--ease-out);
}
.wa-fab:hover { transform: scale(1.05); }
@media (min-width: 1024px) { .wa-fab { display: none; } }