/* Theme Stylesheet with CSS Custom Properties */
/* This file defines all colors, shadows, and design tokens for easy theming */

:root {
    /* Primary Colors */
    --color-primary-50: #EFF8FF;
    --color-primary-100: #DFF0FF;
    --color-primary-200: #B8E1FF;
    --color-primary-300: #78CBFF;
    --color-primary-400: #3BB2FF;
    --color-primary-500: #1E9BFF;
    --color-primary-600: #0077DB;
    --color-primary-700: #0D66B3;
    --color-primary-800: #0F5493;
    --color-primary-900: #13467A;

    /* Success Colors */
    --color-success-50: #EDFDF8;
    --color-success-100: #D3F9EC;
    --color-success-200: #AAF2DA;
    --color-success-300: #70D5B3;
    --color-success-400: #3FC09B;
    --color-success-500: #1BA77B;
    --color-success-600: #108564;
    --color-success-700: #0E6A52;
    --color-success-800: #0F5543;
    --color-success-900: #0D4537;

    /* Neutral Colors */
    --color-neutral-0: #FFFFFF;
    --color-neutral-50: #F8FAFC;
    --color-neutral-100: #F1F5F9;
    --color-neutral-200: #E2E8F0;
    --color-neutral-300: #CBD5E1;
    --color-neutral-400: #94A3B8;
    --color-neutral-500: #64748B;
    --color-neutral-600: #475569;
    --color-neutral-700: #334155;
    --color-neutral-800: #1E293B;
    --color-neutral-900: #0F172A;

    /* Warning Colors */
    --color-warning-50: #FFFBEB;
    --color-warning-100: #FEF3C7;
    --color-warning-200: #FDE68A;
    --color-warning-300: #FCD34D;
    --color-warning-400: #FBBF24;
    --color-warning-500: #F59E0B;
    --color-warning-600: #D97706;
    --color-warning-700: #B45309;
    --color-warning-800: #92400E;
    --color-warning-900: #78350F;

    /* Error Colors */
    --color-error-50: #FEF2F2;
    --color-error-100: #FEE2E2;
    --color-error-200: #FECACA;
    --color-error-300: #FCA5A5;
    --color-error-400: #F87171;
    --color-error-500: #EF4444;
    --color-error-600: #DC2626;
    --color-error-700: #B91C1C;
    --color-error-800: #991B1B;
    --color-error-900: #7F1D1D;

    /* Accent Colors - Rose */
    --color-accent-rose-50: #FFF1F2;
    --color-accent-rose-100: #FFE4E6;
    --color-accent-rose-200: #FECDD3;
    --color-accent-rose-300: #FDA4AF;
    --color-accent-rose-400: #FB7185;
    --color-accent-rose-500: #B76E79;
    --color-accent-rose-600: #E11D48;
    --color-accent-rose-700: #BE123C;
    --color-accent-rose-800: #9F1239;
    --color-accent-rose-900: #881337;

    /* Accent Colors - Purple */
    --color-accent-purple-50: #F2F0FB;
    --color-accent-purple-400: #7C68D4;
    --color-accent-purple-500: #5A42BD;
    --color-accent-purple-600: #46329A;

    /* Accent Colors - Teal */
    --color-accent-teal-50: #E9F8F9;
    --color-accent-teal-400: #3FC1CC;
    --color-accent-teal-500: #10A0AB;
    --color-accent-teal-600: #0C7E87;

    /* Accent Colors - Orange */
    --color-accent-orange-50: #FFF3EC;
    --color-accent-orange-400: #FFA164;
    --color-accent-orange-500: #FF8A3D;
    --color-accent-orange-600: #CC6E31;

    /* Accent Colors - Sand */
    --color-accent-sand-50: #F5F1EB;
    --color-accent-sand-400: #BCA57E;
    --color-accent-sand-500: #A68A64;
    --color-accent-sand-600: #856E4F;

    /* Shadows */
    --shadow-sm: 0px 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0px 4px 6px rgba(0, 0, 0, 0.07);
    --shadow-lg: 0px 8px 16px rgba(0, 0, 0, 0.04);
    --shadow-xl: 0px 20px 25px rgba(0, 0, 0, 0.1);
    --shadow-2xl: 0px 25px 50px rgba(0, 0, 0, 0.15);

    /* Border Radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 200px;

    /* Spacing */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-2xl: 48px;

    /* Typography */
    --font-family-primary: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-size-xs: 12px;
    --font-size-sm: 14px;
    --font-size-base: 16px;
    --font-size-lg: 18px;
    --font-size-xl: 20px;
    --font-size-2xl: 24px;
    --font-size-3xl: 30px;

    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    --line-height-tight: 1.25;
    --line-height-normal: 1.375;
    --line-height-relaxed: 1.5;

    /* Transitions */
    --transition-fast: 150ms ease-in-out;
    --transition-base: 250ms ease-in-out;
    --transition-slow: 350ms ease-in-out;
}

/* Global Font Import */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');

/* Base Typography */
body {
    font-family: var(--font-family-primary);
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
    color: var(--color-neutral-900);
}

/* Utility Classes */
.text-primary {
    color: var(--color-primary-500) !important;
}

.text-primary-700 {
    color: var(--color-primary-700) !important;
}

.text-neutral-500 {
    color: var(--color-neutral-500) !important;
}

.bg-primary {
    background-color: var(--color-primary-500) !important;
}

.bg-neutral-50 {
    background-color: var(--color-neutral-50) !important;
}

.shadow-lg {
    box-shadow: var(--shadow-lg) !important;
}

.rounded-lg {
    border-radius: var(--radius-lg) !important;
}

.rounded-full {
    border-radius: var(--radius-full) !important;
}