/**
 * Bliik Supervisor Design System - CSS Custom Properties
 *
 * A comprehensive color system centered on therapeutic teal-to-blue gradient
 * promoting trust, professionalism, and calm for ABA therapy management.
 *
 * Documentation: /docs/design/COLOR_SYSTEM.md
 * Version: 1.0.0
 * Last Updated: 2025-10-07
 */

:root {
  /* ========================================
     PRIMARY BRAND COLORS
     ======================================== */

  /* Core Colors */
  --primary-teal: #289B87;
  --primary-aqua: #20B2AA;      /* Bridge color for smooth transition */
  --primary-blue: #1E90FF;      /* Ocean Blue - softer, more harmonious */

  /* Gradients - Monochromatic Teal (harmonious, professional) */
  --primary-gradient: linear-gradient(135deg, #289B87 0%, #1C7561 100%);
  --primary-gradient-reverse: linear-gradient(135deg, #1C7561 0%, #289B87 100%);
  --primary-gradient-vertical: linear-gradient(180deg, #289B87 0%, #1C7561 100%);
  --primary-gradient-radial: radial-gradient(circle, #289B87 0%, #1C7561 100%);

  /* ========================================
     TEAL SCALE
     Usage: Success states, progress, growth
     ======================================== */

  --teal-50: #E6F7F4;    /* Lightest - Backgrounds, highlights */
  --teal-100: #B3E8DD;   /* Very light - Hover states */
  --teal-200: #80D9C6;   /* Light - Borders, dividers */
  --teal-300: #4DCAAF;   /* Medium light - UI elements */
  --teal-400: #289B87;   /* Base - Primary actions, brand */
  --teal-500: #228874;   /* Medium - Active states */
  --teal-600: #1C7561;   /* Medium dark - Hover darkening */
  --teal-700: #16624E;   /* Dark - Text on light backgrounds */
  --teal-800: #104F3B;   /* Very dark - Deep emphasis */
  --teal-900: #0A3C28;   /* Darkest - Maximum contrast */

  /* ========================================
     AQUA SCALE (Bridge Color)
     Usage: Smooth transitions, harmony
     ======================================== */

  --aqua-50: #E6F9F8;    /* Lightest - Backgrounds */
  --aqua-100: #B3EFEC;   /* Very light - Hover states */
  --aqua-200: #80E5E0;   /* Light - Borders */
  --aqua-300: #4DDBD4;   /* Medium light */
  --aqua-400: #20B2AA;   /* Base - Bridge color */
  --aqua-500: #1C9A93;   /* Medium - Active states */
  --aqua-600: #18827C;   /* Medium dark */
  --aqua-700: #146A65;   /* Dark */
  --aqua-800: #10524E;   /* Very dark */
  --aqua-900: #0C3A37;   /* Darkest */

  /* ========================================
     BLUE SCALE (Ocean Blue)
     Usage: Primary actions, links, trust
     ======================================== */

  --blue-50: #E8F4FE;    /* Lightest - Backgrounds, highlights */
  --blue-100: #BFE1FD;   /* Very light - Hover states */
  --blue-200: #96CEFC;   /* Light - Borders, dividers */
  --blue-300: #6DBBFB;   /* Medium light - UI elements */
  --blue-400: #44A8FA;   /* Medium - Interactive elements */
  --blue-500: #1E90FF;   /* Base - Ocean Blue (softer, harmonious) */
  --blue-600: #1A7FE6;   /* Medium dark - Active states */
  --blue-700: #166ECD;   /* Dark - Text on light backgrounds */
  --blue-800: #125DB4;   /* Very dark - Deep emphasis */
  --blue-900: #0E4C9B;   /* Darkest - Maximum contrast */

  /* ========================================
     SEMANTIC COLORS
     ======================================== */

  /* Success (Enhanced Teal) */
  --success-light: #D1FAE5;
  --success: #289B87;
  --success-dark: #16624E;

  /* Warning (Warm Coral - Complementary to Teal) */
  --warning-light: #FEF3C7;
  --warning: #F59E0B;
  --warning-dark: #B45309;

  /* Error (Professional Red) */
  --error-light: #FEE2E2;
  --error: #DC2626;
  --error-dark: #991B1B;

  /* Info (Medium Blue) */
  --info-light: #DBEAFE;
  --info: #3B82F6;
  --info-dark: #1E40AF;

  /* Accent (Vibrant Teal for strong CTAs) */
  --accent: #14B8A6;
  --accent-light: #99F6E4;
  --accent-dark: #0F766E;

  /* ========================================
     NEUTRAL PALETTE
     Warm gray with subtle blue tint
     ======================================== */

  --gray-50: #F9FAFB;
  --gray-100: #F3F4F6;
  --gray-200: #E5E7EB;
  --gray-300: #D1D5DB;
  --gray-400: #9CA3AF;
  --gray-500: #6B7280;
  --gray-600: #4B5563;
  --gray-700: #374151;
  --gray-800: #1F2937;
  --gray-900: #111827;

  /* ========================================
     TEXT COLORS
     ======================================== */

  --text-primary: #111827;       /* Main content, headings */
  --text-secondary: #4B5563;     /* Supporting content */
  --text-tertiary: #9CA3AF;      /* Captions, labels, metadata */
  --text-on-primary: #FFFFFF;    /* Text on colored backgrounds */
  --text-on-teal: #FFFFFF;       /* Text on teal backgrounds */
  --text-on-blue: #FFFFFF;       /* Text on blue backgrounds */

  /* ========================================
     BACKGROUND COLORS
     ======================================== */

  --bg-page: #F9FAFB;            /* Page background */
  --bg-card: #FFFFFF;            /* Card backgrounds */
  --bg-hover: #F3F4F6;           /* Hover states */
  --bg-active: #E5E7EB;          /* Active states */
  --bg-disabled: #F3F4F6;        /* Disabled elements */

  /* ========================================
     BORDER COLORS
     ======================================== */

  --border-light: #F3F4F6;       /* Subtle borders */
  --border-default: #E5E7EB;     /* Standard borders */
  --border-medium: #D1D5DB;      /* Medium borders */
  --border-strong: #9CA3AF;      /* Strong borders */

  /* ========================================
     SHADOWS
     Color-tinted shadows for depth
     ======================================== */

  /* Teal Shadows */
  --shadow-teal-sm: 0 2px 8px rgba(40, 155, 135, 0.08);
  --shadow-teal-md: 0 4px 16px rgba(40, 155, 135, 0.12);
  --shadow-teal-lg: 0 8px 32px rgba(40, 155, 135, 0.16);
  --shadow-teal-xl: 0 12px 48px rgba(40, 155, 135, 0.20);

  /* Blue Shadows */
  --shadow-blue-sm: 0 2px 8px rgba(14, 81, 199, 0.08);
  --shadow-blue-md: 0 4px 16px rgba(14, 81, 199, 0.12);
  --shadow-blue-lg: 0 8px 32px rgba(14, 81, 199, 0.16);
  --shadow-blue-xl: 0 12px 48px rgba(14, 81, 199, 0.20);

  /* Neutral Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

  /* ========================================
     FOCUS STATES
     Accessible focus indicators
     ======================================== */

  --focus-ring-teal: 0 0 0 3px rgba(40, 155, 135, 0.15);
  --focus-ring-blue: 0 0 0 3px rgba(14, 81, 199, 0.15);
  --focus-ring-error: 0 0 0 3px rgba(220, 38, 38, 0.15);

  /* ========================================
     SPACING & SIZING
     Consistent spacing scale
     ======================================== */

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

  /* ========================================
     BORDER RADIUS
     Consistent rounding
     ======================================== */

  --radius-sm: 0.375rem;    /* 6px */
  --radius-md: 0.5rem;      /* 8px */
  --radius-lg: 0.75rem;     /* 12px */
  --radius-xl: 1rem;        /* 16px */
  --radius-2xl: 1.25rem;    /* 20px */
  --radius-full: 9999px;    /* Fully rounded */

  /* ========================================
     TRANSITIONS
     Smooth, consistent animations
     ======================================== */

  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms ease;
  --transition-slowest: 500ms ease;

  /* ========================================
     Z-INDEX SCALE
     Layering hierarchy
     ======================================== */

  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;

  /* ========================================
     TYPOGRAPHY
     Font-related custom properties
     ======================================== */

  --font-family-base: 'Inter', 'Nunito', 'Open Sans', Arial, sans-serif;
  --font-family-heading: 'Inter', 'Nunito', 'Open Sans', Arial, sans-serif;

  --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.5;
  --line-height-relaxed: 1.75;

  --letter-spacing-tight: -0.02em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.02em;
}

/* ========================================
   DARK MODE SUPPORT (Future)
   ======================================== */

@media (prefers-color-scheme: dark) {
  :root {
    /* Dark mode overrides can be added here in the future */
  }
}

/* ========================================
   PRINT STYLES
   ======================================== */

@media print {
  :root {
    /* Optimize colors for print */
    --shadow-teal-sm: none;
    --shadow-teal-md: 0 1px 2px rgba(0, 0, 0, 0.1);
    --shadow-blue-sm: none;
    --shadow-blue-md: 0 1px 2px rgba(0, 0, 0, 0.1);
  }
}