/* 
  AFRISOQ DESIGN SYSTEM
  ---------------------
  Use this file to control global styles:
  - Colors: Change hex values to update the UI (Tailwind will follow).
  - Weights: Update --fw-* variables to change font thickness across the app.
  - Sizes: Update --text-* variables for color consistency.
*/
:root {
    /* Colors */
    --primary-50: #fff2f2;
    --primary-100: #ffe1e1;
    --primary-500: #F53003;
    --primary-600: #d92902;
    --primary-900: #7f1d0b;

    /* Purples */
    --purple-50: #faf5ff;
    --purple-100: #f3e8ff;
    --purple-200: #e9d5ff;
    --purple-300: #d8b4fe;
    --purple-400: #c084fc;
    --purple-500: #a855f7;
    --purple-600: #9333ea;
    --purple-700: #7e22ce;
    --purple-800: #6b21a8;
    --purple-900: #581c87;

    /* Indigos */
    --indigo-50: #eef2ff;
    --indigo-100: #e0e7ff;
    --indigo-200: #c7d2fe;
    --indigo-300: #a5b4fc;
    --indigo-400: #818cf8;
    --indigo-500: #6366f1;
    --indigo-600: #4f46e5;
    --indigo-700: #4338ca;
    --indigo-800: #3730a3;
    --indigo-900: #312e81;

    /* Text Colors */
    --text-main: #0f172a;
    /* slate-900 */
    --text-muted: #64748b;
    /* slate-500 */
    --text-light: #94a3b8;
    /* slate-400 */

    /* Font Weights */
    --fw-light: 300;
    --fw-normal: 400;
    --fw-medium: 500;
    --fw-semibold: 500;
    --fw-bold: 500;
    --fw-extrabold: 500;
    --fw-black: 500;

    /* Global Transitions */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-main: 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Custom Utilities that use the variables */
body {
    color: var(--text-main);
    font-weight: var(--fw-normal);
}

.font-black {
    font-weight: var(--fw-black) !important;
}

.font-bold {
    font-weight: var(--fw-bold) !important;
}

.font-semibold {
    font-weight: var(--fw-semibold) !important;
}

.font-medium {
    font-weight: var(--fw-medium) !important;
}