/**
 * Design Tokens - IllTellYou Platform
 *
 * Single source of truth for all design values.
 * Use CSS custom properties (variables) for consistency across services.
 */

:root {
  /* ============================================
     MINIMALIST GRAYSCALE PALETTE
     ============================================ */
  /* Active buttons - Dark gray */
  --color-primary: #505050;
  --color-primary-dark: #404040;
  --color-primary-light: #606060;

  /* Disabled buttons - Light gray */
  --color-disabled: #d0d0d0;

  /* Text fields - White */
  --color-input-bg: #ffffff;

  /* Background - Light gray */
  --color-bg-primary: #f5f5f5;
  --color-bg-secondary: #ffffff;
  --color-bg-tertiary: #e9ecef;

  /* Text - Dark gray/Black */
  --color-text-primary: #2d2d2d;
  --color-text-secondary: #505050;
  --color-text-tertiary: #808080;

  /* Borders - Medium gray */
  --color-border: #c0c0c0;
  --color-border-focus: #808080;

  /* Semantic colors - All grayscale now */
  --color-success: #505050;
  --color-success-dark: #404040;
  --color-error: #707070;
  --color-error-dark: #606060;
  --color-warning: #909090;
  --color-info: #505050;
  --color-info-dark: #404040;

  /* Section backgrounds - Subtle gray */
  --color-section-bg: #fafafa;
  --color-section-border: #e0e0e0;

  /* ============================================
     SPACING SCALE (8px base)
     ============================================ */
  --space-xs: 0.5rem;   /* 8px */
  --space-sm: 0.75rem;  /* 12px */
  --space-md: 1rem;     /* 16px */
  --space-lg: 1.5rem;   /* 24px */
  --space-xl: 2rem;     /* 32px */
  --space-2xl: 3rem;    /* 48px */

  /* ============================================
     TYPOGRAPHY SCALE
     ============================================ */
  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", 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-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* ============================================
     BORDER RADIUS
     ============================================ */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 15px;
  --radius-xl: 20px;

  /* ============================================
     SHADOWS
     ============================================ */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 15px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 4px 20px rgba(0, 0, 0, 0.15);
  --shadow-xl: 0 10px 40px rgba(0, 0, 0, 0.2);

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

  /* ============================================
     Z-INDEX SCALE
     ============================================ */
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-modal: 1000;
  --z-toast: 2000;

  /* ============================================
     LAYOUT
     ============================================ */
  --max-width-container: 1200px;
  --max-width-content: 800px;
  --logo-size-desktop: 180px;
  --logo-size-mobile: 120px;
}