/**
 * DuplexDot DIGITAL AGENCY — DESIGN TOKENS & SYSTEM VARIABLES
 * Strict central tokens for colors, typography, spacing, elevations, and layout constraints.
 */

:root {
  /* ==========================================================================
     1. COLOR SYSTEM (DERIVED FROM DuplexDot LOGO & BRAND IDENTITY)
     ========================================================================== */
  
  /* Primary Brand Blue (Electric Royal Blue from DuplexDot Logo) */
  --color-primary: #1A6BFF;
  --color-primary-hover: #1054D6;
  --color-primary-active: #0B45B3;
  --color-primary-light: #EEF4FF;
  --color-primary-subtle: #F4F8FF;
  --color-primary-glow: rgba(26, 107, 255, 0.12);
  --color-primary-rgb: 26, 107, 255;

  /* Brand Dark Navy / Slate (From Logo Wordmark "DUPLEX") */
  --color-brand-dark: #0B132B;
  --color-brand-dark-soft: #1C2541;
  --color-brand-dark-rgb: 11, 19, 43;

  /* Text Colors */
  --color-text-primary: #0F172A;       /* High-contrast slate-900 */
  --color-text-secondary: #475569;     /* Readable slate-600 (WCAG AA compliant) */
  --color-text-muted: #64748B;         /* Supporting slate-500 */
  --color-text-inverse: #FFFFFF;       /* Pure white on dark */
  --color-text-inverse-muted: #94A3B8; /* Slate-400 on dark */

  /* Background Colors (Light, editorial, high-contrast) */
  --color-background: #FFFFFF;         /* Pure clean white */
  --color-background-soft: #F8FAFC;    /* Soft neutral slate-50 */
  --color-background-subtle: #F1F5F9;  /* Muted neutral slate-100 */
  --color-background-card: #FFFFFF;
  --color-background-dark: #0B132B;

  /* Border & Divider Colors */
  --color-border: #E2E8F0;             /* Standard hairline border */
  --color-border-subtle: #EDF2F7;      /* Extremely light subtle divider */
  --color-border-hover: #CBD5E1;       /* Active / hover border */
  --color-border-focus: #1A6BFF;       /* Keyboard focus border */

  /* Neutral Base & Utility Colors */
  --color-white: #FFFFFF;
  --color-black: #000000;
  --color-success: #10B981;
  --color-warning: #F59E0B;
  --color-error: #EF4444;

  /* ==========================================================================
     2. TYPOGRAPHY SYSTEM (POPPINS PRIMARY + ELEGANT MODERN SERIF ACCENT)
     ========================================================================== */
  
  /* Font Families */
  --font-family-primary: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-family-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-family-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Font Weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --font-weight-black: 900;

  /* Responsive Mathematical Typography Scale */
  --font-size-display: clamp(2.5rem, 5vw + 1rem, 4.25rem);  /* 40px - 68px */
  --line-height-display: 1.1;
  --letter-spacing-display: -0.025em;

  --font-size-h1: clamp(2.125rem, 3.5vw + 0.75rem, 3.25rem); /* 34px - 52px */
  --line-height-h1: 1.15;
  --letter-spacing-h1: -0.02em;

  --font-size-h2: clamp(1.75rem, 2.5vw + 0.5rem, 2.5rem);    /* 28px - 40px */
  --line-height-h2: 1.2;
  --letter-spacing-h2: -0.015em;

  --font-size-h3: clamp(1.375rem, 1.5vw + 0.5rem, 1.75rem);  /* 22px - 28px */
  --line-height-h3: 1.3;
  --letter-spacing-h3: -0.01em;

  --font-size-h4: clamp(1.125rem, 1vw + 0.25rem, 1.25rem);   /* 18px - 20px */
  --line-height-h4: 1.4;
  --letter-spacing-h4: 0;

  --font-size-body-large: 1.125rem;                           /* 18px */
  --line-height-body-large: 1.65;

  --font-size-body: 1rem;                                     /* 16px */
  --line-height-body: 1.6;

  --font-size-small: 0.875rem;                                /* 14px */
  --line-height-small: 1.5;

  --font-size-label: 0.75rem;                                 /* 12px */
  --line-height-label: 1.4;
  --letter-spacing-label: 0.08em;

  /* ==========================================================================
     3. SPACING & SIZING SYSTEM (GENEROUS EDITORIAL WHITE SPACE)
     ========================================================================== */
  
  --space-xs: 0.25rem;   /* 4px */
  --space-sm: 0.5rem;    /* 8px */
  --space-md: 1rem;      /* 16px */
  --space-lg: 1.5rem;    /* 24px */
  --space-xl: 2rem;      /* 32px */
  --space-2xl: 3rem;     /* 48px */
  --space-3xl: 4rem;     /* 64px */
  --space-4xl: 6rem;     /* 96px */

  /* Macro Layout Spacing */
  --section-spacing-y: clamp(4.5rem, 7vw, 7.5rem);
  --section-spacing-sm: clamp(3rem, 5vw, 4.5rem);
  --container-padding: clamp(1.25rem, 4vw, 2.5rem);
  --container-max-width: 1240px;
  --container-narrow-max-width: 860px;
  --container-wide-max-width: 1400px;

  /* ==========================================================================
     4. BORDER RADII & ELEVATIONS
     ========================================================================== */
  
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* Shadows (Controlled, crisp, non-blurry) */
  --shadow-sm: 0 1px 2px 0 rgba(15, 23, 42, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.07), 0 2px 4px -2px rgba(15, 23, 42, 0.05);
  --shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.03);
  --shadow-xl: 0 20px 25px -5px rgba(15, 23, 42, 0.09), 0 8px 10px -6px rgba(15, 23, 42, 0.04);
  --shadow-primary-sm: 0 4px 14px 0 rgba(26, 107, 255, 0.28);
  --shadow-primary-lg: 0 8px 24px 0 rgba(26, 107, 255, 0.35);

  /* ==========================================================================
     5. TRANSITIONS & TIMINGS
     ========================================================================== */
  
  --ease-out-smooth: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-medium: 350ms;
  --duration-slow: 500ms;

  --transition-fast: all var(--duration-fast) var(--ease-out-smooth);
  --transition-normal: all var(--duration-normal) var(--ease-out-smooth);
  --transition-colors: color var(--duration-normal) var(--ease-out-smooth), background-color var(--duration-normal) var(--ease-out-smooth), border-color var(--duration-normal) var(--ease-out-smooth);
  --transition-transform: transform var(--duration-normal) var(--ease-out-smooth);

  /* ==========================================================================
     6. Z-INDEX SCALE
     ========================================================================== */
  
  --z-negative: -1;
  --z-normal: 1;
  --z-sticky: 100;
  --z-header: 500;
  --z-dropdown: 600;
  --z-modal-backdrop: 900;
  --z-modal: 1000;
  --z-toast: 1100;
}