/**
 * PinSheetPro Design Tokens
 *
 * CSS custom properties (variables) for the PinSheetPro design system.
 * This is the single source of truth for design values.
 *
 * See docs/BRANDING.md for full documentation on usage and guidelines.
 */

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

  /* Main brand green - used for primary buttons, links, focus states, success indicators */
  --psp-green: #198754;

  /* Dark green - gradient start, premium/featured accents */
  --psp-green-dark: #0f4c3a;

  /* Light green - gradient end */
  --psp-green-light: #1a5f4a;

  /* ============================================
   * SECONDARY COLORS
   * ============================================ */

  /* Blue - secondary actions, info states */
  --psp-blue: #0d6efd;

  /* Red - errors, destructive actions, danger states */
  --psp-red: #dc3545;

  /* Gold/Yellow - warnings, star ratings, caution states */
  --psp-gold: #ffc107;

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

  /* Primary text color - headings, body text */
  --psp-text-dark: #1f2937;

  /* Secondary/muted text - labels, captions, help text */
  --psp-text-muted: #6b7280;

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

  /* Light gray background - section backgrounds, alternating rows */
  --psp-bg-light: #f8f9fa;

  /* White background */
  --psp-bg-white: #ffffff;

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

  /* General borders - cards, dividers, separators */
  --psp-border: #e5e7eb;

  /* Form input borders */
  --psp-border-input: #ced4da;

  /* ============================================
   * STATUS BADGE COLORS
   * ============================================ */

  /* Owner badge */
  --psp-badge-owner-bg: #dbeafe;
  --psp-badge-owner-text: #1e40af;

  /* Admin badge */
  --psp-badge-admin-bg: #fef3c7;
  --psp-badge-admin-text: #92400e;

  /* User badge */
  --psp-badge-user-bg: #e5e7eb;
  --psp-badge-user-text: #374151;

  /* Guest badge */
  --psp-badge-guest-bg: #e5e7eb;
  --psp-badge-guest-text: #6b7280;

  /* Invited badge */
  --psp-badge-invited-bg: #fce7f3;
  --psp-badge-invited-text: #831843;

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

  /* Subtle shadow - hover states, light depth */
  --psp-shadow-subtle: 0 2px 8px rgba(0, 0, 0, 0.05);

  /* Card shadow - cards, dropdowns */
  --psp-shadow-card: 0 6px 24px rgba(0, 0, 0, 0.08);

  /* Elevated shadow - floating elements, popovers */
  --psp-shadow-elevated: 0 16px 36px rgba(0, 0, 0, 0.08);

  /* Modal shadow - modals, dialogs */
  --psp-shadow-modal: 0 20px 25px -5px rgba(0, 0, 0, 0.1);

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

  /* Small radius - buttons, small inputs */
  --psp-radius-sm: 6px;

  /* Medium radius - inputs, cards (compact) */
  --psp-radius-md: 8px;

  /* Large radius - cards, panels */
  --psp-radius-lg: 16px;

  /* Full radius - pills, badges, tags */
  --psp-radius-full: 9999px;

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

  /* Fast transition - buttons, small interactive elements */
  --psp-transition-fast: 150ms ease;

  /* Smooth transition - cards, larger elements */
  --psp-transition-smooth: 200ms ease;

  /* ============================================
   * FOCUS STATES
   * ============================================ */

  /* Green focus shadow - form controls, buttons */
  --psp-focus-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.25);

  /* Red focus shadow - error states */
  --psp-focus-shadow-error: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);

  /* Blue focus shadow - secondary elements */
  --psp-focus-shadow-blue: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);

  /* ============================================
   * SPACING
   * ============================================ */

  --psp-space-1: 0.25rem;  /* 4px */
  --psp-space-2: 0.5rem;   /* 8px */
  --psp-space-3: 1rem;     /* 16px */
  --psp-space-4: 1.5rem;   /* 24px */
  --psp-space-5: 3rem;     /* 48px */

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

  --psp-font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  --psp-font-weight-light: 300;
  --psp-font-weight-regular: 400;
  --psp-font-weight-medium: 500;
  --psp-font-weight-semibold: 600;
  --psp-font-weight-bold: 700;

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

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