/**
 * CBTAPPS Design System - CSS Custom Properties
 * Version: 1.0.0
 *
 * This file defines all design tokens as CSS custom properties
 * for the CBTAPPS multi-tenant SaaS platform.
 */

:root {
  /* ============================================
   * COLOR PALETTE - PRIMARY (Therapeutic Blue)
   * ============================================ */

  /* Primary Colors */
  --color-primary-50: #e6f3ff;
  --color-primary-100: #b3d9ff;
  --color-primary-200: #80bfff;
  --color-primary-300: #4da6ff;
  --color-primary-400: #1a8cff;
  --color-primary-500: #0073e6;
  --color-primary-600: #005cb8;
  --color-primary-700: #00468a;
  --color-primary-800: #002f5c;
  --color-primary-900: #00172e;

  /* ============================================
   * COLOR PALETTE - SECONDARY (Calm Teal)
   * ============================================ */

  --color-secondary-50: #e6f7f5;
  --color-secondary-100: #b3ebe6;
  --color-secondary-200: #80dfd6;
  --color-secondary-300: #4dd3c6;
  --color-secondary-400: #1ac7b6;
  --color-secondary-500: #00bb9d;
  --color-secondary-600: #00967e;
  --color-secondary-700: #00705f;
  --color-secondary-800: #004b40;
  --color-secondary-900: #002620;

  /* ============================================
   * COLOR PALETTE - ACCENT (Warm Amber)
   * ============================================ */

  --color-accent-50: #fff8e6;
  --color-accent-100: #ffebcc;
  --color-accent-200: #ffdfb3;
  --color-accent-300: #ffd299;
  --color-accent-400: #ffc680;
  --color-accent-500: #ffb966;
  --color-accent-600: #cc9452;
  --color-accent-700: #996f3d;
  --color-accent-800: #664a29;
  --color-accent-900: #332514;

  /* ============================================
   * COLOR PALETTE - SUCCESS (Growth Green)
   * ============================================ */

  --color-success-50: #e6f7ec;
  --color-success-100: #b3e6c7;
  --color-success-200: #80d5a1;
  --color-success-300: #4dc47b;
  --color-success-400: #1ab356;
  --color-success-500: #009f47;
  --color-success-600: #007f39;
  --color-success-700: #005f2b;
  --color-success-800: #003f1d;
  --color-success-900: #001f0e;

  /* ============================================
   * COLOR PALETTE - WARNING (Attention Orange)
   * ============================================ */

  --color-warning-50: #fff4e6;
  --color-warning-100: #ffe6b3;
  --color-warning-200: #ffd880;
  --color-warning-300: #ffca4d;
  --color-warning-400: #ffbc1a;
  --color-warning-500: #fa0;
  --color-warning-600: #cc8a00;
  --color-warning-700: #996600;
  --color-warning-800: #664400;
  --color-warning-900: #332200;

  /* ============================================
   * COLOR PALETTE - ERROR (Alert Red)
   * ============================================ */

  --color-error-50: #ffe6e6;
  --color-error-100: #ffb3b3;
  --color-error-200: #ff8080;
  --color-error-300: #ff4d4d;
  --color-error-400: #ff1a1a;
  --color-error-500: #e60000;
  --color-error-600: #b80000;
  --color-error-700: #8a0000;
  --color-error-800: #5c0000;
  --color-error-900: #2e0000;

  /* ============================================
   * NEUTRAL COLOR PALETTE
   * ============================================ */

  /* Neutral Grays */
  --color-neutral-0: #ffffff;
  --color-neutral-50: #fafafa;
  --color-neutral-100: #f5f5f5;
  --color-neutral-200: #e5e5e5;
  --color-neutral-300: #d4d4d4;
  --color-neutral-400: #a3a3a3;
  --color-neutral-500: #737373;
  --color-neutral-600: #525252;
  --color-neutral-700: #404040;
  --color-neutral-800: #262626;
  --color-neutral-900: #171717;

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

  --color-background-primary: var(--color-neutral-0);
  --color-background-secondary: var(--color-neutral-50);
  --color-background-tertiary: var(--color-neutral-100);
  --color-background-inverse: var(--color-neutral-900);

  --color-text-primary: var(--color-neutral-900);
  --color-text-secondary: var(--color-neutral-600);
  --color-text-tertiary: var(--color-neutral-500);
  --color-text-inverse: var(--color-neutral-0);
  --color-text-link: var(--color-primary-500);
  --color-text-link-hover: var(--color-primary-600);

  --color-border-default: var(--color-neutral-300);
  --color-border-strong: var(--color-neutral-400);
  --color-border-subtle: var(--color-neutral-200);

  --color-border-focus: var(--color-primary-500);
  --color-border-error: var(--color-error-500);
  --color-border-success: var(--color-success-500);
  --color-border-warning: var(--color-warning-500);

  /* ============================================
   * TYPOGRAPHY SCALE
   * ============================================ */

  /* Font Families */
  --font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-family-heading: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-family-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;

  /* Font Sizes (Type Scale: 1.250 - Major Third) */
  --font-size-xs: 0.64rem;      /* 10.24px */
  --font-size-sm: 0.8rem;       /* 12.8px */
  --font-size-base: 1rem;       /* 16px */
  --font-size-lg: 1.25rem;      /* 20px */
  --font-size-xl: 1.563rem;     /* 25px */
  --font-size-2xl: 1.953rem;    /* 31.25px */
  --font-size-3xl: 2.441rem;    /* 39.06px */
  --font-size-4xl: 3.052rem;    /* 48.83px */
  --font-size-5xl: 3.815rem;    /* 61.04px */

  /* Font Weights */
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Line Heights */
  --line-height-tight: 1.25;
  --line-height-snug: 1.375;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.625;
  --line-height-loose: 2;

  /* Letter Spacing */
  --letter-spacing-tight: -0.025em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.025em;
  --letter-spacing-wider: 0.05em;
  --letter-spacing-widest: 0.1em;

  /* ============================================
   * SPACING SYSTEM (4px base unit)
   * ============================================ */

  --spacing-0: 0;
  --spacing-1: 0.25rem;      /* 4px */
  --spacing-2: 0.5rem;       /* 8px */
  --spacing-3: 0.75rem;      /* 12px */
  --spacing-4: 1rem;         /* 16px */
  --spacing-5: 1.25rem;      /* 20px */
  --spacing-6: 1.5rem;       /* 24px */
  --spacing-8: 2rem;         /* 32px */
  --spacing-10: 2.5rem;      /* 40px */
  --spacing-12: 3rem;        /* 48px */
  --spacing-16: 4rem;        /* 64px */
  --spacing-20: 5rem;        /* 80px */
  --spacing-24: 6rem;        /* 96px */
  --spacing-32: 8rem;        /* 128px */

  /* ============================================
   * BORDER RADIUS
   * ============================================ */

  --radius-none: 0;
  --radius-sm: 0.125rem;      /* 2px */
  --radius-base: 0.25rem;     /* 4px */
  --radius-md: 0.375rem;      /* 6px */
  --radius-lg: 0.5rem;        /* 8px */
  --radius-xl: 0.75rem;       /* 12px */
  --radius-2xl: 1rem;         /* 16px */
  --radius-3xl: 1.5rem;       /* 24px */
  --radius-full: 9999px;

  /* ============================================
   * SHADOWS
   * ============================================ */

  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-base: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-md: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --shadow-2xl: 0 50px 100px -20px rgb(0 0 0 / 0.25);

  /* ============================================
   * Z-INDEX SCALE
   * ============================================ */

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

  /* ============================================
   * TRANSITIONS
   * ============================================ */

  --transition-fast: 150ms ease-in-out;
  --transition-base: 200ms ease-in-out;
  --transition-slow: 300ms ease-in-out;
  --transition-slower: 500ms ease-in-out;

  /* ============================================
   * BREAKPOINTS (for reference in JS)
   * ============================================ */

  --breakpoint-xs: 320px;
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;
}

/* ============================================
 * DARK MODE TOKENS
 * ============================================ */

[data-theme="dark"] {
  /* Override semantic colors for dark mode */
  --color-background-primary: var(--color-neutral-900);
  --color-background-secondary: var(--color-neutral-800);
  --color-background-tertiary: var(--color-neutral-700);
  --color-background-inverse: var(--color-neutral-0);

  --color-text-primary: var(--color-neutral-0);
  --color-text-secondary: var(--color-neutral-400);
  --color-text-tertiary: var(--color-neutral-500);
  --color-text-inverse: var(--color-neutral-900);

  --color-border-default: var(--color-neutral-700);
  --color-border-strong: var(--color-neutral-600);
  --color-border-subtle: var(--color-neutral-800);

  /* Dark mode shadows (subtler) */
  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.3);
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.4), 0 1px 2px -1px rgb(0 0 0 / 0.4);
  --shadow-base: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.4);
  --shadow-md: 0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.4);
  --shadow-lg: 0 20px 25px -5px rgb(0 0 0 / 0.5), 0 8px 10px -6px rgb(0 0 0 / 0.5);
  --shadow-xl: 0 25px 50px -12px rgb(0 0 0 / 0.6);
  --shadow-2xl: 0 50px 100px -20px rgb(0 0 0 / 0.7);
}

/* ============================================
 * REDUCED MOTION
 * ============================================ */

@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0ms;
    --transition-base: 0ms;
    --transition-slow: 0ms;
    --transition-slower: 0ms;
  }
}