/**
 * African Market — Unified Design Tokens
 * Master Theme Architecture: Light, Dark, System
 */

:root {
    /* -------------------------------------------------------------
       1. Core Color Primitives (Warm, Modern, Pan-African Heritage)
       ------------------------------------------------------------- */
    --am-primary-50:  #edfbf3;
    --am-primary-100: #d3f6e1;
    --am-primary-200: #a9ecc5;
    --am-primary-300: #71dba2;
    --am-primary-400: #38c27c;
    --am-primary-500: #176b43; /* Savanna Emerald Core */
    --am-primary-600: #0f5434;
    --am-primary-700: #0d432b;
    --am-primary-800: #0b3623;
    --am-primary-900: #092c1d;

    --am-ochre-50:    #fdf7ec;
    --am-ochre-100:   #f9ebd0;
    --am-ochre-200:   #f2d49c;
    --am-ochre-500:   #c85a17; /* Warm Terracotta / Ochre */
    --am-ochre-600:   #a8450f;

    --am-gold-50:     #fffbeb;
    --am-gold-100:    #fef3c7;
    --am-gold-500:    #d97706; /* Sahara Gold */

    /* -------------------------------------------------------------
       2. Light Theme Design Tokens (Default)
       ------------------------------------------------------------- */
    --am-bg: #f8fafc;
    --am-surface: #ffffff;
    --am-surface-subtle: #f1f5f9;
    --am-surface-elevated: #ffffff;
    --am-surface-glass: rgba(255, 255, 255, 0.85);

    --am-text: #0f172a;
    --am-text-secondary: #334155;
    --am-muted: #64748b;
    --am-text-disabled: #94a3b8;

    --am-border: #e2e8f0;
    --am-border-subtle: #f1f5f9;
    --am-border-strong: #cbd5e1;

    --am-primary: #176b43;
    --am-primary-hover: #0f5434;
    --am-primary-active: #0d432b;
    --am-primary-contrast: #ffffff;
    --am-primary-subtle: #edfbf3;

    --am-accent: #c85a17;
    --am-accent-hover: #a8450f;
    --am-accent-contrast: #ffffff;

    --am-secondary: #f1f5f9;
    --am-secondary-hover: #e2e8f0;
    --am-secondary-text: #334155;

    --am-success: #067647;
    --am-success-bg: #ecfdf3;
    --am-success-border: #abefc6;

    --am-warning: #b54708;
    --am-warning-bg: #fffaeb;
    --am-warning-border: #fedf89;

    --am-danger: #b42318;
    --am-danger-bg: #fef3f2;
    --am-danger-border: #fecdca;

    --am-info: #175cd3;
    --am-info-bg: #eff8ff;
    --am-info-border: #b2ddff;

    --am-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
    --am-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
    --am-shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.04);
    --am-shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.03);
    --am-shadow-xl: 0 20px 25px -5px rgba(15, 23, 42, 0.10), 0 8px 10px -6px rgba(15, 23, 42, 0.04);

    --am-focus-ring: 0 0 0 3px rgba(23, 107, 67, 0.25);
    --am-focus-ring-danger: 0 0 0 3px rgba(180, 35, 24, 0.25);

    /* -------------------------------------------------------------
       3. Typography Scale & Families
       ------------------------------------------------------------- */
    --am-font-sans: "Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --am-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

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

    /* -------------------------------------------------------------
       4. Spacing System (4px Base Grid)
       ------------------------------------------------------------- */
    --am-space-1:  4px;
    --am-space-2:  8px;
    --am-space-3:  12px;
    --am-space-4:  16px;
    --am-space-5:  20px;
    --am-space-6:  24px;
    --am-space-8:  32px;
    --am-space-10: 40px;
    --am-space-12: 48px;
    --am-space-16: 64px;
    --am-space-20: 80px;

    /* -------------------------------------------------------------
       5. Border Radii & Layout
       ------------------------------------------------------------- */
    --am-radius-xs: 4px;
    --am-radius-sm: 8px;
    --am-radius:    12px;
    --am-radius-lg: 16px;
    --am-radius-xl: 24px;
    --am-radius-full: 9999px;

    --am-container: 1280px;
    --am-container-narrow: 960px;
    --am-container-wide: 1440px;

    /* Transitions & Spring Curves */
    --am-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --am-transition-smooth: 250ms cubic-bezier(0.4, 0, 0.2, 1);
    --am-transition-bounce: 350ms cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Z-Index Hierarchy */
    --am-z-dropdown:  1000;
    --am-z-sticky:    1020;
    --am-z-fixed:     1030;
    --am-z-modal-bg:  1040;
    --am-z-modal:     1050;
    --am-z-popover:   1060;
    --am-z-toast:     1070;
}

/* -------------------------------------------------------------
   6. Dark Theme Design Tokens
   ------------------------------------------------------------- */
[data-theme="dark"] {
    --am-bg: #0b0f17;
    --am-surface: #131b26;
    --am-surface-subtle: #1c2636;
    --am-surface-elevated: #1e293b;
    --am-surface-glass: rgba(19, 27, 38, 0.85);

    --am-text: #f8fafc;
    --am-text-secondary: #cbd5e1;
    --am-muted: #94a3b8;
    --am-text-disabled: #64748b;

    --am-border: #243248;
    --am-border-subtle: #1c2636;
    --am-border-strong: #334155;

    --am-primary: #22a065;
    --am-primary-hover: #2ec47d;
    --am-primary-active: #176b43;
    --am-primary-contrast: #ffffff;
    --am-primary-subtle: rgba(34, 160, 101, 0.15);

    --am-accent: #e07a38;
    --am-accent-hover: #f38f4f;
    --am-accent-contrast: #ffffff;

    --am-secondary: #1e293b;
    --am-secondary-hover: #334155;
    --am-secondary-text: #e2e8f0;

    --am-success: #12b76a;
    --am-success-bg: rgba(18, 183, 106, 0.12);
    --am-success-border: rgba(18, 183, 106, 0.3);

    --am-warning: #f79009;
    --am-warning-bg: rgba(247, 144, 9, 0.12);
    --am-warning-border: rgba(247, 144, 9, 0.3);

    --am-danger: #f04438;
    --am-danger-bg: rgba(240, 68, 56, 0.12);
    --am-danger-border: rgba(240, 68, 56, 0.3);

    --am-info: #53b1fd;
    --am-info-bg: rgba(83, 177, 253, 0.12);
    --am-info-border: rgba(83, 177, 253, 0.3);

    --am-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
    --am-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.2);
    --am-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
    --am-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.6), 0 4px 6px -4px rgba(0, 0, 0, 0.4);
    --am-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.7), 0 8px 10px -6px rgba(0, 0, 0, 0.5);

    --am-focus-ring: 0 0 0 3px rgba(34, 160, 101, 0.35);
    --am-focus-ring-danger: 0 0 0 3px rgba(240, 68, 56, 0.35);
}

/* -------------------------------------------------------------
   7. System Theme Automatic Preference (when data-theme is unset or system)
   ------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --am-bg: #0b0f17;
        --am-surface: #131b26;
        --am-surface-subtle: #1c2636;
        --am-surface-elevated: #1e293b;
        --am-surface-glass: rgba(19, 27, 38, 0.85);

        --am-text: #f8fafc;
        --am-text-secondary: #cbd5e1;
        --am-muted: #94a3b8;
        --am-text-disabled: #64748b;

        --am-border: #243248;
        --am-border-subtle: #1c2636;
        --am-border-strong: #334155;

        --am-primary: #22a065;
        --am-primary-hover: #2ec47d;
        --am-primary-active: #176b43;
        --am-primary-contrast: #ffffff;
        --am-primary-subtle: rgba(34, 160, 101, 0.15);

        --am-accent: #e07a38;
        --am-accent-hover: #f38f4f;
        --am-accent-contrast: #ffffff;

        --am-secondary: #1e293b;
        --am-secondary-hover: #334155;
        --am-secondary-text: #e2e8f0;

        --am-success: #12b76a;
        --am-success-bg: rgba(18, 183, 106, 0.12);
        --am-success-border: rgba(18, 183, 106, 0.3);

        --am-warning: #f79009;
        --am-warning-bg: rgba(247, 144, 9, 0.12);
        --am-warning-border: rgba(247, 144, 9, 0.3);

        --am-danger: #f04438;
        --am-danger-bg: rgba(240, 68, 56, 0.12);
        --am-danger-border: rgba(240, 68, 56, 0.3);

        --am-info: #53b1fd;
        --am-info-bg: rgba(83, 177, 253, 0.12);
        --am-info-border: rgba(83, 177, 253, 0.3);

        --am-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
        --am-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.2);
        --am-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
        --am-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.6), 0 4px 6px -4px rgba(0, 0, 0, 0.4);
        --am-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.7), 0 8px 10px -6px rgba(0, 0, 0, 0.5);

        --am-focus-ring: 0 0 0 3px rgba(34, 160, 101, 0.35);
        --am-focus-ring-danger: 0 0 0 3px rgba(240, 68, 56, 0.35);
    }
}