/* ==========================================================
   AgencyOS - Shared CSS Variables

   Centralized CSS custom properties for consistent theming
   across public and portal tiers.

   NOTE: Tenant-specific values (--c-brand, --c-accent, etc.)
   are substituted during build process for each tenant.
   ========================================================== */

:root {
  /* ========================================
     BRAND COLORS (Tenant-Specific)
     NOTE: Tenant-specific brand colors (--c-brand, --c-accent, etc.)
     are loaded dynamically from /css/variables.css endpoint.
     That endpoint serves CSS variables from the database (website_css table).
     They are NOT defined here to avoid conflicts.
     ======================================== */

  /* ========================================
     BASE COLORS
     ======================================== */
  --c-bg: #fff;                 /* Background */
  --c-fg: #0c0c0c;              /* Foreground/text */
  --c-text: #111827;            /* Primary text (gray-900) */
  --c-muted: #6b7280;           /* Muted text (gray-500) */
  --c-card: #fff;               /* Card background */

  /* ========================================
     GRAY SCALE
     ======================================== */
  --c-white: #ffffff;
  --c-gray-50: #f9fafb;
  --c-gray-100: #f3f4f6;
  --c-gray-200: #e5e7eb;
  --c-gray-300: #d1d5db;
  --c-gray-400: #9ca3af;
  --c-gray-500: #6b7280;
  --c-gray-600: #4b5563;
  --c-gray-700: #374151;
  --c-gray-800: #1f2937;
  --c-gray-900: #111827;

  /* ========================================
     STATUS COLORS
     ======================================== */
  /* Success/Confirmed (Green) */
  --c-success: #10b981;
  --c-success-light: #d1fae5;
  --c-success-dark: #047857;

  /* Warning (Yellow/Amber) */
  --c-warning: #f59e0b;
  --c-warning-light: #fef3c7;
  --c-warning-dark: #d97706;

  /* Error/Danger (Red) */
  --c-error: #ef4444;
  --c-error-light: #fee2e2;
  --c-error-dark: #dc2626;
  --c-red: #ef4444;             /* Alias for backward compatibility */
  --c-red-light: #ffe7e7;       /* Alias for backward compatibility */

  /* Info/Scheduled (Blue) */
  --c-info: #3b82f6;
  --c-info-light: #dbeafe;
  --c-info-dark: #2563eb;

  /* ========================================
     SPACING SCALE
     ======================================== */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --spacing-xl: 24px;
  --spacing-2xl: 32px;
  --spacing-3xl: 48px;

  /* ========================================
     BORDER RADIUS SCALE
     ======================================== */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 25px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* ========================================
     SHADOWS
     ======================================== */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.3);
  --shadow-xl: 0 12px 32px rgba(0, 0, 0, 0.4);
  --shadow-focus: 0 0 0 3px rgba(245, 158, 11, 0.18);
  --shadow-focus-brand: 0 0 0 3px rgba(235, 113, 48, 0.18);

  /* ========================================
     TRANSITIONS
     ======================================== */
  --transition-fast: all 0.15s ease;
  --transition-base: all 0.2s ease;
  --transition-slow: all 0.3s ease;

  /* ========================================
     LAYOUT
     ======================================== */
  --wrap: 1200px;               /* Max content width */
  --pad: 20px;                  /* Default padding */
  --nav-height: 60px;           /* Navigation bar height */
  --bg-pin: bottom;             /* Background image pin position: top or bottom */


  /* ========================================
     Z-INDEX SCALE
     ======================================== */
  --z-base: 1;
  --z-sidebar: 1000;
  --z-sidebar-tab: 1500;
  --z-nav: 4000;
  --z-nav-menus: 5000;
  --z-modal: 9000;
  --z-modal-backdrop: 8900;
  --z-dropdown: 1000;
  --z-tooltip: 2000;

  /* ========================================
     BREAKPOINTS (For reference in media queries)
     Note: CSS custom properties don't work in @media queries
     These are documented here for consistency
     ======================================== */
  /* --breakpoint-sm: 480px;    Mobile */
  /* --breakpoint-md: 768px;    Tablet */
  /* --breakpoint-lg: 1024px;   Desktop */
  /* --breakpoint-xl: 1280px;   Large desktop */

  /* ========================================
     TYPOGRAPHY
     ======================================== */
  --font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --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.25rem;      /* 20px */
  --font-size-2xl: 1.5rem;      /* 24px */
  --font-size-3xl: 1.875rem;    /* 30px */
  --font-size-4xl: 2.25rem;     /* 36px */

  --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;
}