/* =====================================================
   COSMOS DESIGN TOKENS
   Centralized design system variables for consistency
   Integrates with Bootstrap 5.3.3 CSS variables
   ===================================================== */

:root {
  /* ===== SPACING SCALE - Maps to Bootstrap spacing utilities ===== */
  /* Bootstrap uses: 0, 0.25rem, 0.5rem, 1rem, 1.5rem, 3rem */
  --space-0: 0;           /* Bootstrap: 0 */
  --space-1: 0.25rem;     /* Bootstrap: 1 (4px) */
  --space-2: 0.5rem;      /* Bootstrap: 2 (8px) */
  --space-3: 0.75rem;     /* Custom (12px) */
  --space-4: 1rem;        /* Bootstrap: 3 (16px) */
  --space-5: 1.5rem;      /* Bootstrap: 4 (24px) */
  --space-6: 2rem;        /* Custom (32px) */
  --space-7: 3rem;        /* Bootstrap: 5 (48px) */
  --space-8: 4rem;        /* Custom (64px) */

  /* ===== TYPOGRAPHY SCALE - Maps to Bootstrap typography ===== */
  /* Bootstrap font sizes: fs-1 through fs-6 */
  --text-xs: 0.75rem;     /* Custom (12px) */
  --text-sm: 0.875rem;    /* Bootstrap: fs-6 (14px) */
  --text-base: 1rem;      /* Bootstrap: fs-5 (16px) */
  --text-lg: 1.125rem;    /* Bootstrap: fs-4 (18px) */
  --text-xl: 1.25rem;     /* Bootstrap: fs-3 (20px) */
  --text-2xl: 1.5rem;     /* Bootstrap: fs-2 (24px) */
  --text-3xl: 1.875rem;   /* Custom (30px) */
  --text-4xl: 2.25rem;    /* Bootstrap: fs-1 (36px) */

  /* Line heights - Maps to Bootstrap lh-* classes */
  --leading-tight: 1.25;   /* Bootstrap: lh-sm */
  --leading-normal: 1.5;   /* Bootstrap: lh-base */
  --leading-relaxed: 1.75; /* Bootstrap: lh-lg */

  /* Font weights - Maps to Bootstrap fw-* classes */
  --font-normal: 400;      /* Bootstrap: fw-normal */
  --font-medium: 500;      /* Bootstrap: fw-medium */
  --font-semibold: 600;    /* Bootstrap: fw-semibold */
  --font-bold: 700;        /* Bootstrap: fw-bold */

  /* ===== COLOR PALETTE - Extends Bootstrap theme colors ===== */
  /* Primary colors - Override Bootstrap's --bs-primary */
  --color-primary: #4a6a7b;            /* Angular $blue-grey hsl(201.9, 29.9%, 41.4%) */
  --color-primary-light: #607d8b;
  --color-primary-dark: #3d5266;      /* Angular $dark-grey hsl(205.7, 23.2%, 29.6%) */
  --bs-primary: #4a6a7b;              /* Override Bootstrap primary */
  --bs-primary-rgb: 74, 106, 123;     /* RGB values for utilities */
  
  /* Accent colors - Maps to Bootstrap's --bs-info */
  --color-accent: #00b1e0;            /* Angular $cyan hsl(197.7, 100%, 43.9%) */
  --color-accent-light: #33c2e8;
  --color-accent-dark: #0090b8;
  --bs-info: #00b1e0;                 /* Override Bootstrap info */
  --bs-info-rgb: 0, 177, 224;
  
  /* Text colors - Matching Angular implementation */
  --color-text: #3d5266;              /* Angular $dark-grey */
  --color-text-secondary: #4a6a7b;    /* Angular $blue-grey */
  --color-text-muted: #708a99;
  --color-text-light: #a0b8c4;
  --color-text-inverse: #ffffff;
  
  /* Background colors */
  --color-bg: #ffffff;
  --color-bg-alt: #eef5f8;           /* Angular $light-grey hsl(200, 50%, 95.3%) */
  --color-bg-light: #f7fbfd;
  --color-bg-dark: #d6e5ed;          /* Angular $medium-grey hsl(200, 38.7%, 87.8%) */
  
  /* Border colors */
  --color-border: #bccad3;            /* Angular $border hsl(200, 19.3%, 78.6%) */
  --color-border-light: #d6e5ed;
  --color-border-dark: #9db3c0;
  
  /* State colors - Override Bootstrap state colors for better contrast */
  --color-success: #00ad56;           /* Angular $success hsl(173.8, 100%, 33.9%) */
  --color-success-bg: #d4edda;
  --color-success-border: #c3e6cb;
  --color-success-text: #0f5132;
  --bs-success: #00ad56;              /* Override Bootstrap success */
  --bs-success-rgb: 0, 173, 86;
  
  --color-danger: #f04e98;            /* Angular $danger hsl(338.9, 84.2%, 60.2%) */
  --color-danger-bg: #f8d7da;
  --color-danger-border: #f5c6cb;
  --color-danger-text: #58151c;
  --bs-danger: #f04e98;               /* Override Bootstrap danger */
  --bs-danger-rgb: 240, 78, 152;
  
  --color-warning: #e3b505;           /* Angular $warning hsl(49.1, 98.3%, 45.1%) */
  --color-warning-bg: #fff3cd;
  --color-warning-border: #ffeeba;
  --color-warning-text: #664d03;
  --bs-warning: #e3b505;              /* Override Bootstrap warning */
  --bs-warning-rgb: 227, 181, 5;
  
  /* Info color already defined above with accent */
  --color-info: #00b1e0;
  --color-info-bg: #e0f9fb;
  --color-info-border: #b6effb;
  --color-info-text: #005a73;
  
  /* ===== BORDER RADIUS - Maps to Bootstrap border radius ===== */
  --radius-sm: 0.25rem;   /* Bootstrap: rounded-1 (4px) */
  --radius-md: 0.375rem;  /* Bootstrap: rounded-2 (6px) */
  --radius-lg: 0.5rem;    /* Bootstrap: rounded-3 (8px) */
  --radius-xl: 0.75rem;   /* Custom (12px) */
  --radius-full: 50rem;   /* Bootstrap: rounded-pill */
  --bs-border-radius: 0.375rem;      /* Override Bootstrap default */
  --bs-border-radius-sm: 0.25rem;
  --bs-border-radius-lg: 0.5rem;
  --bs-border-radius-pill: 50rem;
  
  /* ===== SHADOWS - Extends Bootstrap shadows ===== */
  --shadow-xs: 0 1px 2px rgba(96, 125, 141, 0.15);
  --shadow-sm: 0 2px 4px rgba(96, 125, 141, 0.25);    /* Bootstrap: shadow-sm */
  --shadow-md: 0 0 6px 0 rgba(96, 125, 141, 0.50);    /* Angular card-shadow */
  --shadow-lg: 0 0 12px 0 rgba(96, 125, 141, 0.50);   /* Bootstrap: shadow-lg */
  --bs-box-shadow: 0 0 6px 0 rgba(96, 125, 141, 0.50);
  --bs-box-shadow-sm: 0 2px 4px rgba(96, 125, 141, 0.25);
  --bs-box-shadow-lg: 0 0 12px 0 rgba(96, 125, 141, 0.50);
  --shadow-xl: 0 0 16px 0 rgba(96, 125, 141, 0.60);
  
  /* ===== TRANSITIONS ===== */
  --transition-fast: 150ms ease-in-out;
  --transition-base: 200ms ease-in-out;
  --transition-slow: 300ms ease-in-out;
  
  /* ===== Z-INDEX SCALE ===== */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
  
  /* ===== LAYOUT ===== */
  --container-max-width: 1200px;
  --sidebar-width: 250px;
  --navbar-height: 60px;
}

/* Dark mode support (optional, for future) */
@media (prefers-color-scheme: dark) {
  :root.auto-dark {
    --color-text: #e4e4e7;
    --color-text-secondary: #a1a1aa;
    --color-bg: #18181b;
    --color-bg-alt: #27272a;
    --color-border: #3f3f46;
  }
}