/**
 * PropertyWebBuilder Brand Variables
 *
 * These CSS custom properties define the PWB brand colors and design tokens.
 * Use these for the PWB platform interface (admin, docs, marketing).
 *
 * Note: Tenant themes have their own independent style variables.
 */

:root {
  /* ==========================================================================
     Primary Colors (Green)
     ========================================================================== */
  --pwb-primary-50: #F0FDF4;
  --pwb-primary-100: #DCFCE7;
  --pwb-primary-200: #BBF7D0;
  --pwb-primary-300: #86EFAC;
  --pwb-primary-400: #4ADE80;  /* Gradient start */
  --pwb-primary-500: #22C55E;  /* Main brand color */
  --pwb-primary-600: #16A34A;  /* Gradient end */
  --pwb-primary-700: #15803D;
  --pwb-primary-800: #166534;
  --pwb-primary-900: #14532D;

  /* ==========================================================================
     Neutral Colors (Slate)
     ========================================================================== */
  --pwb-slate-50: #F8FAFC;   /* Background */
  --pwb-slate-100: #F1F5F9;
  --pwb-slate-200: #E2E8F0;  /* Borders */
  --pwb-slate-300: #CBD5E1;
  --pwb-slate-400: #94A3B8;
  --pwb-slate-500: #64748B;  /* Muted text */
  --pwb-slate-600: #475569;  /* Secondary text */
  --pwb-slate-700: #334155;  /* Primary text */
  --pwb-slate-800: #1E293B;
  --pwb-slate-900: #0F172A;

  /* ==========================================================================
     Semantic Colors
     ========================================================================== */
  --pwb-success: #22C55E;
  --pwb-success-light: #DCFCE7;
  --pwb-warning: #F59E0B;
  --pwb-warning-light: #FEF3C7;
  --pwb-error: #EF4444;
  --pwb-error-light: #FEE2E2;
  --pwb-info: #3B82F6;
  --pwb-info-light: #DBEAFE;

  /* ==========================================================================
     Gradients
     ========================================================================== */
  --pwb-gradient-primary: linear-gradient(135deg, #4ADE80 0%, #22C55E 50%, #16A34A 100%);
  --pwb-gradient-primary-hover: linear-gradient(135deg, #22C55E 0%, #16A34A 50%, #15803D 100%);

  /* ==========================================================================
     Typography
     ========================================================================== */
  --pwb-font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --pwb-font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  /* Font sizes */
  --pwb-text-xs: 0.75rem;     /* 12px */
  --pwb-text-sm: 0.875rem;    /* 14px */
  --pwb-text-base: 1rem;      /* 16px */
  --pwb-text-lg: 1.125rem;    /* 18px */
  --pwb-text-xl: 1.25rem;     /* 20px */
  --pwb-text-2xl: 1.5rem;     /* 24px */
  --pwb-text-3xl: 1.875rem;   /* 30px */
  --pwb-text-4xl: 2.25rem;    /* 36px */

  /* Font weights */
  --pwb-font-normal: 400;
  --pwb-font-medium: 500;
  --pwb-font-semibold: 600;
  --pwb-font-bold: 700;

  /* Line heights */
  --pwb-leading-tight: 1.25;
  --pwb-leading-normal: 1.5;
  --pwb-leading-relaxed: 1.625;

  /* ==========================================================================
     Spacing (8px base grid)
     ========================================================================== */
  --pwb-space-1: 0.25rem;   /* 4px */
  --pwb-space-2: 0.5rem;    /* 8px */
  --pwb-space-3: 0.75rem;   /* 12px */
  --pwb-space-4: 1rem;      /* 16px */
  --pwb-space-5: 1.25rem;   /* 20px */
  --pwb-space-6: 1.5rem;    /* 24px */
  --pwb-space-8: 2rem;      /* 32px */
  --pwb-space-10: 2.5rem;   /* 40px */
  --pwb-space-12: 3rem;     /* 48px */
  --pwb-space-16: 4rem;     /* 64px */

  /* ==========================================================================
     Border Radius
     ========================================================================== */
  --pwb-radius-sm: 0.25rem;   /* 4px */
  --pwb-radius-md: 0.375rem;  /* 6px */
  --pwb-radius-lg: 0.5rem;    /* 8px */
  --pwb-radius-xl: 0.75rem;   /* 12px */
  --pwb-radius-2xl: 1rem;     /* 16px */
  --pwb-radius-3xl: 1.5rem;   /* 24px */
  --pwb-radius-full: 9999px;

  /* ==========================================================================
     Shadows
     ========================================================================== */
  --pwb-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --pwb-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --pwb-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --pwb-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --pwb-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);

  /* Focus ring */
  --pwb-ring-color: rgba(34, 197, 94, 0.5);
  --pwb-ring: 0 0 0 3px var(--pwb-ring-color);

  /* ==========================================================================
     Transitions
     ========================================================================== */
  --pwb-transition-fast: 150ms ease;
  --pwb-transition-normal: 200ms ease;
  --pwb-transition-slow: 300ms ease;

  /* ==========================================================================
     Z-Index Scale
     ========================================================================== */
  --pwb-z-dropdown: 1000;
  --pwb-z-sticky: 1020;
  --pwb-z-fixed: 1030;
  --pwb-z-modal-backdrop: 1040;
  --pwb-z-modal: 1050;
  --pwb-z-popover: 1060;
  --pwb-z-tooltip: 1070;
}

/* ==========================================================================
   Utility Classes
   ========================================================================== */

/* Background gradient */
.pwb-bg-gradient {
  background: var(--pwb-gradient-primary);
}

/* Text gradient */
.pwb-text-gradient {
  background: var(--pwb-gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Focus ring */
.pwb-focus-ring:focus {
  outline: none;
  box-shadow: var(--pwb-ring);
}

/* Primary button */
.pwb-btn-primary {
  background: var(--pwb-gradient-primary);
  color: white;
  border: none;
  border-radius: var(--pwb-radius-lg);
  padding: var(--pwb-space-2) var(--pwb-space-4);
  font-weight: var(--pwb-font-medium);
  cursor: pointer;
  transition: all var(--pwb-transition-fast);
}

.pwb-btn-primary:hover {
  background: var(--pwb-gradient-primary-hover);
  box-shadow: var(--pwb-shadow-md);
}

/* Secondary button */
.pwb-btn-secondary {
  background: var(--pwb-slate-50);
  color: var(--pwb-slate-700);
  border: 1px solid var(--pwb-slate-200);
  border-radius: var(--pwb-radius-lg);
  padding: var(--pwb-space-2) var(--pwb-space-4);
  font-weight: var(--pwb-font-medium);
  cursor: pointer;
  transition: all var(--pwb-transition-fast);
}

.pwb-btn-secondary:hover {
  background: var(--pwb-slate-100);
  border-color: var(--pwb-slate-300);
}

/* Card */
.pwb-card {
  background: white;
  border: 1px solid var(--pwb-slate-200);
  border-radius: var(--pwb-radius-xl);
  box-shadow: var(--pwb-shadow);
  padding: var(--pwb-space-6);
}