/* ================================================================
   TGT THEME: DESIGN TOKENS (CSS VARIABLES)
   - File: assets/css/variables.css
   - This file is the single source of truth for the entire design system.
   - It defines the global color palette, typography scale, spacing units,
     and other core visual properties.
   ================================================================ */

:root {
    
    /* 1. COLOUR PALETTE
    ---------------------------------------------------------------- */
    --tgt-color-primary: #102842;    /* Dark Navy Blue */
    --tgt-color-accent: #7a2448;     /* Deep Magenta/Maroon */
    --tgt-color-gold: #d4a574;       /* Warm Gold/Tan */
    
    --tgt-color-white: #FFFFFF;
    --tgt-color-bg-light: #F9F7F5;   /* Off-white, warm background */
    --tgt-color-border: #EAEAEA;     /* Light grey for borders and dividers */
    
    --tgt-color-text-dark: #102842;  /* Primary text color, same as primary */
    --tgt-color-text-body: #333333;  /* A slightly softer black for body copy */
    --tgt-color-text-light: #555555; /* Lighter grey for subtitles, meta text */
    --tgt-color-text-inverted: rgba(255, 255, 255, 0.9); /* Text on dark backgrounds */
    
    
    /* 2. TYPOGRAPHY
    ---------------------------------------------------------------- */
    --tgt-font-family-heading: 'Montserrat', sans-serif;
    --tgt-font-family-body: 'Montserrat', sans-serif;
    
    --tgt-font-weight-regular: 400;
    --tgt-font-weight-medium: 500;
    --tgt-font-weight-semibold: 600;
    --tgt-font-weight-bold: 700;
    
    /* Responsive type scale using clamp() for fluid typography */
    --tgt-font-size-sm: clamp(0.8rem, 0.17vw + 0.76rem, 0.9rem);
    --tgt-font-size-base: clamp(1rem, 0.34vw + 0.91rem, 1.2rem);
    --tgt-font-size-md: clamp(1.25rem, 0.61vw + 1.1rem, 1.6rem);
    --tgt-font-size-lg: clamp(1.56rem, 1vw + 1.31rem, 2.1rem);
    --tgt-font-size-xl: clamp(1.95rem, 1.56vw + 1.56rem, 2.8rem);
    --tgt-font-size-xxl: clamp(2.44rem, 2.38vw + 1.85rem, 3.75rem);
    
    
    /* 3. SPACING SCALE (for margins, padding, gaps)
    ---------------------------------------------------------------- */
    --tgt-space-xs: clamp(0.5rem, 1vw, 0.75rem);
    --tgt-space-sm: clamp(1rem, 2vw, 1.25rem);
    --tgt-space-md: clamp(1.5rem, 3vw, 2rem);
    --tgt-space-lg: clamp(2rem, 4vw, 3rem);
    --tgt-space-xl: clamp(3rem, 6vw, 4.5rem);
    --tgt-space-xxl: clamp(4rem, 8vw, 6rem);
    
    
    /* 4. BORDERS & RADII
    ---------------------------------------------------------------- */
    --tgt-border-width-sm: 1px;
    --tgt-border-width-md: 2px;
    
    --tgt-radius-sm: 4px;       /* Subtle rounding for small elements */
    --tgt-radius-md: 8px;       /* Standard card/input rounding */
    --tgt-radius-lg: 15px;      /* Softer, more prominent card rounding */
    --tgt-radius-full: 50px;    /* Pills, badges, circular elements */

    
    /* 5. SHADOWS
    ---------------------------------------------------------------- */
    --tgt-shadow-sm: 0 2px 4px rgba(16, 40, 66, 0.06);
    --tgt-shadow-md: 0 8px 16px rgba(16, 40, 66, 0.1);
    --tgt-shadow-lg: 0 15px 30px rgba(16, 40, 66, 0.12);
    
    
    /* 6. Z-INDEX STACK
    ---------------------------------------------------------------- */
    --tgt-z-index-default: 1;
    --tgt-z-index-sticky: 100;
    --tgt-z-index-dropdown: 1000;
    --tgt-z-index-modal: 9999;
    
    
    /* 7. TRANSITIONS
    ---------------------------------------------------------------- */
    --tgt-transition-duration: 0.3s;
    --tgt-transition-timing: ease-in-out;
    --tgt-transition-default: var(--tgt-transition-duration) var(--tgt-transition-timing);

}