/*!
 * CULTURE PRESTA V5 - DESIGN TOKENS
 * Professional Business Design System
 * Logo-Driven Color Palette
 * 
 * @version 5.0.0
 * @author Culture Presta Development Team
 */

:root {
  /* ========================================================================
     COLORS - Logo-Based Palette
     ======================================================================== */
  
  /* Primary - Logo Green (Dominant 70%) */
  --cp-primary-50:  #f0f7f4;
  --cp-primary-100: #d4e8dc;
  --cp-primary-200: #a9d1b9;
  --cp-primary-300: #7eb996;
  --cp-primary-400: #6b9f7f;  /* Logo Light Green */
  --cp-primary-500: #4a7c59;  /* Logo Main Green ⭐ */
  --cp-primary-600: #3d6648;  /* Hover State */
  --cp-primary-700: #2d5539;  /* Logo Dark Green */
  --cp-primary-800: #1f3d28;
  --cp-primary-900: #142817;
  
  /* Accent - Orange (Minimal 5%, CTAs only) */
  --cp-accent-50:  #fff7ed;
  --cp-accent-100: #ffedd5;
  --cp-accent-200: #fed7aa;
  --cp-accent-300: #fdba74;
  --cp-accent-400: #fb923c;
  --cp-accent-500: #f97316;  /* Primary Accent */
  --cp-accent-600: #ea580c;  /* Hover */
  --cp-accent-700: #c2410c;
  
  /* Neutral - Professional Gray (25%) */
  --cp-neutral-25:  #fefefe;
  --cp-neutral-50:  #fafafa;
  --cp-neutral-100: #f5f5f5;
  --cp-neutral-200: #e5e5e5;
  --cp-neutral-300: #d4d4d4;
  --cp-neutral-400: #a3a3a3;
  --cp-neutral-500: #737373;
  --cp-neutral-600: #525252;
  --cp-neutral-700: #404040;  /* Body Text */
  --cp-neutral-800: #262626;
  --cp-neutral-900: #171717;  /* Headings */
  
  /* Semantic Colors */
  --cp-success-50:  #f0fdf4;
  --cp-success-500: #10b981;
  --cp-success-700: #047857;
  
  --cp-error-50:  #fef2f2;
  --cp-error-500: #ef4444;
  --cp-error-700: #b91c1c;
  
  --cp-warning-50:  #fffbeb;
  --cp-warning-500: #f59e0b;
  --cp-warning-700: #b45309;
  
  --cp-info-50:  #eff6ff;
  --cp-info-500: #3b82f6;
  --cp-info-600: #2563eb;
  --cp-info-700: #1d4ed8;
  
  /* ========================================================================
     TYPOGRAPHY
     ======================================================================== */
  
  /* Font Families - System Font Stack (Professional) */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-serif: Georgia, Cambria, "Times New Roman", Times, serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace;
  
  /* Font Sizes - Modular Scale (1.25 - Major Third) */
  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.875rem;   /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-lg:   1.125rem;   /* 18px */
  --text-xl:   1.25rem;    /* 20px */
  --text-2xl:  1.5rem;     /* 24px */
  --text-3xl:  1.875rem;   /* 30px */
  --text-4xl:  2.25rem;    /* 36px */
  --text-5xl:  3rem;       /* 48px */
  --text-6xl:  3.75rem;    /* 60px */
  
  /* Font Weights */
  --font-light:     300;
  --font-normal:    400;
  --font-medium:    500;
  --font-semibold:  600;
  --font-bold:      700;
  --font-extrabold: 800;
  
  /* Line Heights */
  --leading-none:   1;
  --leading-tight:  1.25;
  --leading-snug:   1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --leading-loose:  2;
  
  /* Letter Spacing */
  --tracking-tighter: -0.05em;
  --tracking-tight:   -0.025em;
  --tracking-normal:  0;
  --tracking-wide:    0.025em;
  --tracking-wider:   0.05em;
  --tracking-widest:  0.1em;
  
  /* ========================================================================
     SPACING - 8px Grid System
     ======================================================================== */
  
  --space-0:   0;
  --space-0-5: 0.125rem; /* 2px */
  --space-1:   0.25rem;  /* 4px */
  --space-1-5: 0.375rem; /* 6px */
  --space-2:   0.5rem;   /* 8px  - Base Grid */
  --space-2-5: 0.625rem; /* 10px */
  --space-3:   0.75rem;  /* 12px */
  --space-4:   1rem;     /* 16px */
  --space-5:   1.25rem;  /* 20px */
  --space-6:   1.5rem;   /* 24px */
  --space-7:   1.75rem;  /* 28px */
  --space-8:   2rem;     /* 32px */
  --space-10:  2.5rem;   /* 40px */
  --space-12:  3rem;     /* 48px */
  --space-16:  4rem;     /* 64px */
  --space-20:  5rem;     /* 80px */
  --space-24:  6rem;     /* 96px */
  --space-32:  8rem;     /* 128px */
  --space-40:  10rem;    /* 160px */
  --space-48:  12rem;    /* 192px */
  --space-56:  14rem;    /* 224px */
  --space-64:  16rem;    /* 256px */
  
  /* ========================================================================
     LAYOUT
     ======================================================================== */
  
  /* Container Max Widths */
  --container-sm:  640px;
  --container-md:  768px;
  --container-lg:  1024px;
  --container-xl:  1280px;
  --container-2xl: 1536px;
  
  /* Breakpoints (for reference in media queries) */
  --breakpoint-sm:  640px;
  --breakpoint-md:  768px;
  --breakpoint-lg:  1024px;
  --breakpoint-xl:  1280px;
  --breakpoint-2xl: 1536px;
  
  /* ========================================================================
     BORDERS & RADIUS
     ======================================================================== */
  
  /* Border Widths */
  --border-0: 0;
  --border-1: 1px;
  --border-2: 2px;
  --border-4: 4px;
  
  /* Border Radius */
  --radius-none: 0;
  --radius-sm:   0.125rem;  /* 2px */
  --radius-base: 0.25rem;   /* 4px */
  --radius-md:   0.375rem;  /* 6px */
  --radius-lg:   0.5rem;    /* 8px */
  --radius-xl:   0.75rem;   /* 12px */
  --radius-2xl:  1rem;      /* 16px */
  --radius-3xl:  1.5rem;    /* 24px */
  --radius-full: 9999px;
  
  /* ========================================================================
     SHADOWS - Subtle & Professional
     ======================================================================== */
  
  --shadow-sm:  0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow:     0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  --shadow-md:  0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --shadow-lg:  0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --shadow-xl:  0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);
  --shadow-none: 0 0 #0000;
  
  /* Focus Ring */
  --ring-offset: 2px;
  --ring-width:  2px;
  --ring-color:  rgba(74, 124, 89, 0.5); /* Primary-500 at 50% */
  
  /* ========================================================================
     TRANSITIONS & ANIMATIONS
     ======================================================================== */
  
  /* Durations */
  --duration-75:  75ms;
  --duration-100: 100ms;
  --duration-150: 150ms;
  --duration-200: 200ms;
  --duration-300: 300ms;
  --duration-500: 500ms;
  --duration-700: 700ms;
  --duration-1000: 1000ms;
  
  /* Easing Functions */
  --ease-linear:     linear;
  --ease-in:         cubic-bezier(0.4, 0, 1, 1);
  --ease-out:        cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out:     cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring:     cubic-bezier(0.68, -0.55, 0.265, 1.55);
  
  /* ========================================================================
     Z-INDEX SCALE
     ======================================================================== */
  
  --z-0:      0;
  --z-10:     10;
  --z-20:     20;
  --z-30:     30;
  --z-40:     40;
  --z-50:     50;
  --z-dropdown: 1000;
  --z-sticky:   1020;
  --z-fixed:    1030;
  --z-modal:    1040;
  --z-popover:  1050;
  --z-tooltip:  1060;
  
  /* ========================================================================
     OPACITY
     ======================================================================== */
  
  --opacity-0:   0;
  --opacity-5:   0.05;
  --opacity-10:  0.1;
  --opacity-20:  0.2;
  --opacity-25:  0.25;
  --opacity-30:  0.3;
  --opacity-40:  0.4;
  --opacity-50:  0.5;
  --opacity-60:  0.6;
  --opacity-70:  0.7;
  --opacity-75:  0.75;
  --opacity-80:  0.8;
  --opacity-90:  0.9;
  --opacity-95:  0.95;
  --opacity-100: 1;
}

/* ========================================================================
   DARK MODE TOKENS (Optional - for future)
   ======================================================================== */

@media (prefers-color-scheme: dark) {
  :root {
    /* Dark mode would go here if needed */
    /* Currently not implemented - Business sites typically stay light */
  }
}

/* ========================================================================
   PRINT TOKENS
   ======================================================================== */

@media print {
  :root {
    --shadow-sm:  none;
    --shadow:     none;
    --shadow-md:  none;
    --shadow-lg:  none;
    --shadow-xl:  none;
    --shadow-2xl: none;
  }
}