/**
 * Pro Tint Design Tokens
 * Global CSS Variables
 */

:root {
    /* ============================================
       COLORS - PDF Default
    ============================================ */
    
    /* Brand Colors - PDF */
    --color-accent: #D5001C;           /* PDF Red - Default */
    --color-bg-primary: #000000;       /* Black - Main background */
    --color-bg-secondary: #111111;     /* Dark gray - Cards, Form fields */
    
    /* Brand Colors - UI Sections */
    --color-accent-ui: #e60000;        /* UI Red - For UI sections */
    --color-accent-dark: #cc0000;      /* Darker red variant */
    --color-accent-darker: #b30000;    /* Darkest red (hover states) */
    
    /* Text Colors - Default */
    --color-text-primary: #FFFFFF;     /* White - Main text */
    --color-text-secondary: #B3B3B3;   /* Light gray - Secondary text */
    --color-text-muted: #808080;       /* Gray - Muted text */
    
    /* Text Colors - UI Sections */
    --color-text-ui-gray: #878787;     /* UI sections gray */
    --color-text-ui-light: #aaaaaa;    /* UI sections light gray */
    --color-text-ui-medium: #999999;   /* UI sections medium gray */
    --color-text-ui-bright: #cccccc;   /* UI sections bright gray */
    --color-text-ui-white: #FEFEFF;    /* UI sections near-white */
    
    /* UI Colors */
    --color-border: #222222;           /* Subtle borders */
    --color-border-ui: #111;           /* UI sections border */
    --color-overlay: rgba(0, 0, 0, 0.8); /* Overlays */
    
    /* Background Colors - UI Sections */
    --color-bg-ui-card: #111111;       /* UI card background */
    --color-bg-ui-dark: #0A0A0A;       /* UI dark background */
    --color-bg-gradient-start: #0F0E13; /* Gradient start */
    --color-bg-gradient-end: #19182A;   /* Gradient end */
    
    
    /* ============================================
       TYPOGRAPHY
    ============================================ */
    
    /* Font Family */
    --font-primary: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    
    /* Font Weights */
    --fw-regular: 400;    /* Body text */
    --fw-medium: 500;     /* Headings, Nav, Some buttons */
    --fw-semibold: 600;   /* Main headings, Emphasis */
    --fw-bold: 700;       /* Rarely used */
    
    /* Font Sizes - Fluid Typography using clamp() */
    /* Mobile first: clamp(min, preferred, max) */
    
    --fs-body: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);           /* 16px - 18px */
    --fs-small: clamp(0.875rem, 0.85rem + 0.15vw, 1rem);          /* 14px - 16px */
    --fs-h1: clamp(2rem, 1.5rem + 2.5vw, 3.5rem);                 /* 32px - 56px */
    --fs-h2: clamp(1.75rem, 1.4rem + 1.75vw, 2.75rem);            /* 28px - 44px */
    --fs-h3: clamp(1.5rem, 1.25rem + 1.25vw, 2.25rem);            /* 24px - 36px */
    --fs-h4: clamp(1.25rem, 1.125rem + 0.625vw, 1.75rem);         /* 20px - 28px */
    --fs-button: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem);     /* 15px - 17px */
    --fs-nav: clamp(0.9375rem, 0.9rem + 0.2vw, 1rem);             /* 15px - 16px */
    
    /* Line Heights */
    --lh-tight: 1.2;
    --lh-normal: 1.5;
    --lh-relaxed: 1.7;
    
    /* Letter Spacing */
    --ls-tight: -0.02em;
    --ls-normal: 0;
    --ls-wide: 0.02em;
    --ls-wider: 0.05em;
    
    
    /* ============================================
       SPACING
    ============================================ */
    
    /* Spacing Scale (Based on 8px grid) */
    --space-xs: 0.5rem;      /* 8px */
    --space-sm: 1rem;        /* 16px */
    --space-md: 1.5rem;      /* 24px */
    --space-lg: 2rem;        /* 32px */
    --space-xl: 3rem;        /* 48px */
    --space-2xl: 4rem;       /* 64px */
    --space-3xl: 6rem;       /* 96px */
    
    /* Section Spacing - Fluid */
    --section-padding-y: clamp(3rem, 5vw, 6rem);        /* 48px - 96px */
    --section-padding-x: clamp(1rem, 3vw, 2rem);        /* 16px - 32px */
    
    /* Container Max Width */
    --container-max: 1400px;
    --container-padding: clamp(1rem, 3vw, 2rem);
    
    
    /* ============================================
       BORDERS & RADIUS
    ============================================ */
    
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    
    --border-width: 1px;
    
    
    /* ============================================
       SHADOWS
    ============================================ */
    
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.5);
    
    
    /* ============================================
       TRANSITIONS
    ============================================ */
    
    --transition-fast: 150ms ease-in-out;
    --transition-normal: 300ms ease-in-out;
    --transition-slow: 500ms ease-in-out;
    
    
    /* ============================================
       Z-INDEX SCALE
    ============================================ */
    
    --z-preloader: 9999;
    --z-popup: 1000;
    --z-header: 100;
    --z-overlay: 50;
    --z-base: 1;
}