/* ============================================================
   CleanConnect — Design Tokens (CSS Custom Properties)
   Source: design/tokens/colors.json, spacing.json, typography.json
   ============================================================ */

:root {
  /* Brand Colors */
  --cc-accent:       #D2691E;
  --cc-accent-dark:  #9D4528;
  --cc-accent-light: #E8A87C;
  --cc-accent-soft:  rgba(210, 105, 30, 0.10);

  /* Neutral Colors */
  --cc-white:      #FFFFFF;
  --cc-bg:         #F5F5F5;
  --cc-border:     #DDDDDD;
  --cc-ink:        #1A1A1A;
  --cc-ink-soft:   #4A4A4A;
  --cc-ink-faint:  #8B8B8B;

  /* Semantic Colors */
  --cc-success:  #388E3C;
  --cc-error:    #D32F2F;
  --cc-warning:  #F57C00;
  --cc-info:     #2196F3;

  /* Gradients */
  --cc-gradient-logo: linear-gradient(135deg, #D2691E 0%, #9D4528 100%);
  --cc-gradient-hero: linear-gradient(180deg, rgba(26,26,26,0.10) 0%, rgba(26,26,26,0.55) 100%);

  /* Typography */
  --font-serif: 'Fraunces', Georgia, serif;
  --font-sans:  'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Font Sizes */
  --text-display:    44px;
  --text-heading:    28px;
  --text-subheading: 18px;
  --text-body:       16px;
  --text-small:      14px;
  --text-label:      12px;

  /* Font Weights */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;

  /* Spacing */
  --space-xxs: 4px;
  --space-xs:  8px;
  --space-sm:  12px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;
  --space-xxl: 48px;

  /* Border Radius */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-full: 50%;
  --radius-pill: 100px;

  /* Shadows */
  --shadow-light:    0 2px 8px rgba(0,0,0,0.08);
  --shadow-medium:   0 4px 16px rgba(0,0,0,0.12);
  --shadow-elevated: 0 8px 32px rgba(0,0,0,0.16);

  /* Layout */
  --max-width:     1200px;
  --mobile-width:  375px;
  --sidebar-width: 320px;

  /* Transitions */
  --transition-fast:   0.15s ease;
  --transition-normal: 0.25s ease;
  --transition-slow:   0.40s ease;

  /* Z-index layers */
  --z-base:    1;
  --z-nav:    10;
  --z-modal:  100;
  --z-toast:  200;
  --z-tooltip: 50;
}