/**
 * Global CSS Variables
 * Tasks House Design System
 */

:root {
    /* Colors - Primary */
    --color-primary: #0A5F59;
    --color-secondary: #FDCF6D;
    --color-success: #22bb33;
    --color-error: #bb2124;
    --color-orange: #FFA500;

    /* Colors - Background */
    --color-bg-primary: #FDF9F0;
    --color-bg-secondary: #FFFCF1;
    --color-bg-white: #FFFFFF;
    --color-bg-lightgrey: #F5F5F5;
    --color-bg-light: #EEEEEE;
    --color-bg-progress: #D2CFC7;

    /* Colors - Text */
    --color-text-primary: #111111;
    --color-text-secondary: #333333;
    --color-text-tertiary: #6B7280;
    --color-text-inverse: #FFFFFF;
    --color-text-green: #0A5F59;

    /* Colors - UI Elements */
    --color-border: #A9A8A4;
    --color-border-light: #E5E7EB;
    --color-border-white: #FFFFFF; 
    --color-input-bg: #FFFFFF;
    --color-input-focus: #FDCF6D;
    --color-input-invalid: #bb2124;
    --color-input-valid: #0A5F59;

    /* Button Colors */
    --color-btn-primary-bg: #0A5F59;
    --color-btn-secondary-bg: #FDCF6D;

    /* Spacing */
    --space-xs: 0.25rem;    /* 4px */
    --space-sm: 0.5rem;     /* 8px */
    --space-md: 1rem;       /* 16px */
    --space-lg: 1.5rem;     /* 24px */
    --space-xl: 2rem;       /* 32px */
    --space-2xl: 3rem;      /* 48px */
    --space-3xl: 4rem;      /* 64px */

    /* Font Sizes */
    --font-size-xs: 0.75rem;    /* 12px */
    --font-size-sm: 0.875rem;   /* 14px */
    --font-size-base: 1rem;     /* 16px */
    --font-size-lg: 1.125rem;   /* 18px */
    --font-size-xl: 1.375rem;   /* 22px */
    --font-size-2xl: 1.75rem;   /* 28px */
    --font-size-3xl: 2.25rem;      /* 48px */
    --font-size-4xl: 3rem;      /* 48px */
    --font-size-5xl: 4rem;      /* 64px */

    /* Font Family */
    --font-family-primary: 'Quicksand', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Font Weights */
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* Line Heights */
    --line-height-one: 1;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;

    /* Border Radius */
    --radius-sm: 0.25rem;    /* 4px */
    --radius-md: 0.5rem;     /* 8px */
    --radius-lg: 0.75rem;    /* 12px */
    --radius-full: 50%;

    /* Box Shadows */
    --box-shadow-sm: 1px 1px 1px rgba(0, 0, 0, 0.05);
    --box-shadow-md: 2px 2px 2px rgba(0, 0, 0, 0.05);
    --box-shadow-lg: 4px 4px 5px rgba(0, 0, 0, 0.05);
    --box-shadow-xl: 8px 8px 12px rgba(0, 0, 0, 0.05);
    --box-shadow-top: 0px 1px 3px 2px rgba(0, 0, 0, 0.05);
   

    /* Transitions */
    --transition-fast: 150ms ease-in-out;

    /* Toast/Notification Colors */
    --color-toast-error-bg: #FEE2E2;
    --color-toast-error-text: #991B1B;

    --color-toast-warning-bg: #FEF3C7;
    --color-toast-warning-text: #92400E;

    --color-toast-info-bg: #DBEAFE;
    --color-toast-info-text: #1E40AF;

    --color-toast-success-bg: #D1FAE5;
    --color-toast-success-text: #065F46;

    /* Z-index layers */
    --z-toast: 9999;
}