/* 
 * Enhanced CSS Variable System for Resume Templates
 * Comprehensive design system with consistent scaling and professional defaults
 */

.resume-preview-root {
  /* === TYPOGRAPHY SYSTEM === */
  
  /* Font Families */
  --font-family-primary: {{ styles.get('font_family', 'Inter, -apple-system, BlinkMacSystemFont, sans-serif') }};
  --font-family-secondary: 'Lato, "Helvetica Neue", Arial, sans-serif';
  --font-family-academic: 'Computer Modern, "Times New Roman", serif';
  --font-family-monospace: 'SF Mono, Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace';
  
  /* Font Size Scale (Point-based for PDF consistency) */
  --font-size-xs: {{ styles.get('font_size', 14) * 0.6 }}pt;      /* 8-9pt */
  --font-size-sm: {{ styles.get('font_size', 14) * 0.75 }}pt;     /* 10-11pt */
  --font-size-base: {{ styles.get('font_size', 14) * 0.85 }}pt;   /* 12pt */
  --font-size-md: {{ styles.get('font_size', 14) }}pt;            /* 14pt */
  --font-size-lg: {{ styles.get('font_size', 14) * 1.15 }}pt;     /* 16pt */
  --font-size-xl: {{ styles.get('font_size', 14) * 1.35 }}pt;     /* 19pt */
  --font-size-2xl: {{ styles.get('font_size', 14) * 1.6 }}pt;     /* 22pt */
  --font-size-3xl: {{ styles.get('font_size', 14) * 2.1 }}pt;     /* 29pt */
  --font-size-4xl: {{ styles.get('font_size', 14) * 2.5 }}pt;     /* 35pt */
  
  /* Font Weights */
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-black: 800;
  
  /* Line Heights */
  --line-height-tight: {{ styles.get('line_height', 1.5) * 0.8 }};    /* 1.2 */
  --line-height-normal: {{ styles.get('line_height', 1.5) * 0.87 }};  /* 1.3 */
  --line-height-relaxed: {{ styles.get('line_height', 1.5) }};        /* 1.5 */
  --line-height-loose: {{ styles.get('line_height', 1.5) * 1.2 }};    /* 1.8 */
  
  /* Letter Spacing */
  --letter-spacing-tight: -0.025em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.025em;
  --letter-spacing-wider: 0.05em;
  --letter-spacing-widest: 0.1em;
  
  /* === SPACING SYSTEM === */
  
  /* Space Scale (Point-based) */
  --space-xs: 2pt;
  --space-sm: 4pt;
  --space-md: 6pt;
  --space-lg: 8pt;
  --space-xl: 12pt;
  --space-2xl: 16pt;
  --space-3xl: 20pt;
  --space-4xl: 24pt;
  --space-5xl: 32pt;
  --space-6xl: 40pt;
  
  /* Section Spacing */
  --section-spacing-xs: var(--space-lg);    /* 8pt */
  --section-spacing-sm: var(--space-xl);    /* 12pt */
  --section-spacing-md: var(--space-2xl);   /* 16pt */
  --section-spacing-lg: var(--space-3xl);   /* 20pt */
  --section-spacing-xl: var(--space-4xl);   /* 24pt */
  
  /* Margins */
  --margin-xs: var(--space-sm);
  --margin-sm: var(--space-lg);
  --margin-md: var(--space-2xl);
  --margin-lg: var(--space-3xl);
  --margin-xl: var(--space-4xl);
  
  /* Padding */
  --padding-xs: var(--space-sm);
  --padding-sm: var(--space-lg);
  --padding-md: var(--space-2xl);
  --padding-lg: var(--space-3xl);
  --padding-xl: var(--space-4xl);
  
  /* === COLOR SYSTEM === */
  
  /* Primary Colors */
  --color-text: {{ styles.get('text_color', '#333333') }};
  --color-text-light: {{ styles.get('text_color', '#333333') }}99;     /* 60% opacity */
  --color-text-lighter: {{ styles.get('text_color', '#333333') }}66;   /* 40% opacity */
  --color-text-lightest: {{ styles.get('text_color', '#333333') }}33;  /* 20% opacity */
  
  /* Heading Colors */
  --color-heading: {{ styles.get('heading_color', '#1a1a1a') }};
  --color-heading-light: {{ styles.get('heading_color', '#1a1a1a') }}CC; /* 80% opacity */
  
  /* Accent Colors */
  --color-accent: {{ styles.get('accent_color', '#3b82f6') }};
  --color-accent-light: {{ styles.get('accent_color', '#3b82f6') }}33;   /* 20% opacity */
  --color-accent-dark: {{ styles.get('accent_color', '#3b82f6') }}DD;    /* 87% opacity */
  
  /* Background Colors */
  --color-background: {{ styles.get('background_color', '#ffffff') }};
  --color-background-subtle: #f8f9fa;
  --color-background-muted: #f1f3f4;
  
  /* Border Colors */
  --color-border: {{ styles.get('border_color', '#e5e7eb') }};
  --color-border-light: #f3f4f6;
  --color-border-dark: #d1d5db;
  
  /* Semantic Colors */
  --color-success: #10b981;
  --color-warning: #f59e0b;
  --color-error: #ef4444;
  --color-info: #3b82f6;
  
  /* === BORDER SYSTEM === */
  
  /* Border Widths */
  --border-width-none: 0;
  --border-width-thin: 1px;
  --border-width-medium: 2px;
  --border-width-thick: 3px;
  
  /* Border Radius */
  --border-radius-none: 0;
  --border-radius-sm: 2px;
  --border-radius-md: 4px;
  --border-radius-lg: 8px;
  --border-radius-xl: 12px;
  --border-radius-full: 9999px;
  
  /* === SHADOW SYSTEM === */
  
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  
  /* === PDF-SPECIFIC VARIABLES === */
  
  /* Page Dimensions */
  --page-width: 8.27in;      /* A4 width */
  --page-height: 11.69in;    /* A4 height */
  --page-margin: 0.75in;     /* Standard margin */
  
  /* Print-safe colors */
  --print-text: #000000;
  --print-heading: #000000;
  --print-accent: #000000;
  --print-border: #666666;
  
  /* === LEGACY COMPATIBILITY === */
  
  /* Maintain backward compatibility with existing templates */
  --font-family: var(--font-family-primary);
  --font-size: var(--font-size-md);
  --line-height: var(--line-height-relaxed);
  --text-color: var(--color-text);
  --heading-color: var(--color-heading);
  --accent-color: var(--color-accent);
  --background-color: var(--color-background);
  --border-color: var(--color-border);
  --section-spacing: var(--section-spacing-md);
  --margin-top: var(--margin-lg);
  --margin-bottom: var(--margin-lg);
  --margin-left: var(--margin-lg);
  --margin-right: var(--margin-lg);
}

/* === RESPONSIVE FONT SCALING === */

@media print {
  .resume-preview-root {
    /* Optimize for PDF generation */
    --font-size-base: 10pt;
    --font-size-md: 11pt;
    --line-height-normal: 1.2;
    --section-spacing-md: 12pt;
    --margin-lg: 0.5in;
  }
}

@media (max-width: 768px) {
  .resume-preview-root {
    /* Mobile-friendly scaling */
    --font-size-base: 14px;
    --font-size-md: 16px;
    --space-lg: 12px;
    --section-spacing-md: 20px;
  }
}