/**
 * ═══════════════════════════════════════════════════════════════
 *  BRAND TOKENS — Bliss Tech7 Solutions
 *  Shared CSS variables for all Care Connect pages
 *
 *  Usage:
 *    <link rel="stylesheet" href="brand-tokens.css">
 *
 *  Only defines :root variables — no resets, no components.
 *  Safe to use alongside Bootstrap.
 * ═══════════════════════════════════════════════════════════════
 */

:root {
  /* ── Primary (Orange) ── */
  --brand-primary-50: #FFF7ED;
  --brand-primary-100: #FFEDD5;
  --brand-primary-200: #FED7AA;
  --brand-primary-300: #FDBA74;
  --brand-primary-400: #FB923C;
  --brand-primary-500: #F97316;
  --brand-primary-600: #EA580C;
  --brand-primary-700: #C2410C;
  --brand-primary-800: #9A3412;
  --brand-primary-900: #7C2D12;

  /* ── Secondary (Indigo) ── */
  --brand-secondary-50: #EEF2FF;
  --brand-secondary-100: #E0E7FF;
  --brand-secondary-200: #C7D2FE;
  --brand-secondary-500: #6366F1;
  --brand-secondary-600: #4F46E5;
  --brand-secondary-700: #4338CA;
  --brand-secondary-900: #312E81;

  /* ── Neutral (Slate) ── */
  --brand-neutral-0: #FFFFFF;
  --brand-neutral-50: #F9FAFB;
  --brand-neutral-100: #F3F4F6;
  --brand-neutral-200: #E5E7EB;
  --brand-neutral-300: #D1D5DB;
  --brand-neutral-400: #9CA3AF;
  --brand-neutral-500: #6B7280;
  --brand-neutral-600: #4B5563;
  --brand-neutral-700: #374151;
  --brand-neutral-800: #1F2937;
  --brand-neutral-900: #14213D;
  --brand-neutral-950: #0C1220;

  /* ── Semantic ── */
  --brand-success: #22C55E;
  --brand-success-dark: #16A34A;
  --brand-success-soft: #F0FDF4;
  --brand-success-light: #DCFCE7;
  --brand-warning: #F59E0B;
  --brand-warning-dark: #D97706;
  --brand-warning-soft: #FFFBEB;
  --brand-warning-light: #FEF3C7;
  --brand-error: #EF4444;
  --brand-error-dark: #DC2626;
  --brand-error-soft: #FEF2F2;
  --brand-error-light: #FEE2E2;
  --brand-info: #4F46E5;
  --brand-info-dark: #4338CA;
  --brand-info-soft: #EEF2FF;
  --brand-info-light: #E0E7FF;

  /* ── Surface ── */
  --brand-surface-bg: #F0F4F8;
  --brand-surface-card: #FFFFFF;
  --brand-surface-raised: #FAFBFC;
  --brand-surface-inset: #EDF0F5;
  --brand-surface-dark: #0F172A;
  --brand-surface-dark-card: #1E293B;
  --brand-surface-dark-border: #334155;

  /* ── Border ── */
  --brand-border: #E2E8F0;
  --brand-border-subtle: #E7EAF0;
  --brand-border-strong: #F97316;
  --brand-border-light: #F1F5F9;

  /* ── Text ── */
  --brand-text-primary: #14213D;
  --brand-text-secondary: #6B7280;
  --brand-text-tertiary: #9CA3AF;
  --brand-text-muted: #64748B;
  --brand-text-light: #94A3B8;
  --brand-text-faint: #CBD5E1;

  /* ── Spacing ── */
  --brand-space-xxs: 2px;
  --brand-space-xs: 4px;
  --brand-space-sm: 8px;
  --brand-space-md: 12px;
  --brand-space-lg: 16px;
  --brand-space-xl: 20px;
  --brand-space-xxl: 24px;
  --brand-space-xxxl: 32px;

  /* ── Radius ── */
  --brand-radius-sm: 8px;
  --brand-radius-md: 12px;
  --brand-radius-lg: 14px;
  --brand-radius-xl: 16px;
  --brand-radius-xxl: 20px;
  --brand-radius-card: 24px;
  --brand-radius-pill: 9999px;

  /* ── Typography ── */
  --brand-font-family: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
  --brand-fs-caption: 9px;
  --brand-fs-micro: 10px;
  --brand-fs-small: 11px;
  --brand-fs-body-sm: 12px;
  --brand-fs-body: 13px;
  --brand-fs-body-lg: 14px;
  --brand-fs-subtitle: 15px;
  --brand-fs-title: 16px;
  --brand-fs-h3: 20px;
  --brand-fs-h2: 22px;
  --brand-fs-h1: 24px;
  --brand-fs-display: 28px;
  --brand-fs-hero: 36px;

  /* ── Shadows ── */
  --brand-shadow-sm: 0 1px 3px rgba(20,33,61,0.05);
  --brand-shadow-md: 0 2px 8px rgba(20,33,61,0.08);
  --brand-shadow-lg: 0 4px 16px rgba(20,33,61,0.12);
  --brand-shadow-xl: 0 8px 24px rgba(20,33,61,0.16);

  /* ── Gradient ── */
  --brand-gradient: linear-gradient(135deg, #F97316, #4F46E5);
  --brand-gradient-hover: linear-gradient(135deg, #EA580C, #4338CA);

  /* ── Glows ── */
  --brand-glow: rgba(249, 115, 22, 0.35);
  --brand-glow-strong: rgba(249, 115, 22, 0.5);
}

/* ── Dark Mode Overrides ── */
body.dark-theme, [data-theme="dark"] {
  --brand-surface-bg: #0F172A;
  --brand-surface-card: #1E293B;
  --brand-surface-raised: #1E293B;
  --brand-surface-inset: #0F172A;
  --brand-border: #334155;
  --brand-border-subtle: #1E293B;
  --brand-border-light: #1E293B;
  --brand-text-primary: #F1F5F9;
  --brand-text-secondary: #94A3B8;
  --brand-text-tertiary: #64748B;
  --brand-text-muted: #94A3B8;
  --brand-text-light: #CBD5E1;
  --brand-shadow-sm: 0 1px 3px rgba(0,0,0,0.2);
  --brand-shadow-md: 0 2px 8px rgba(0,0,0,0.3);
  --brand-shadow-lg: 0 4px 16px rgba(0,0,0,0.4);
  --brand-shadow-xl: 0 8px 24px rgba(0,0,0,0.5);
}