/**
 * ===========================================================================
 * UNIVERSAL THEME TOKENS (variables.css) — GOLDEN CIRCLE
 * ===========================================================================
 *
 * WHY (Purpose)
 * - Theme Driven UI     : UI look controlled by theme, not components.
 * - Token purity: theme tokens stay independent of utility-class names in markup.
 * - Future Proof        : Theme swap without refactor.
 *
 * HOW (Governance Rules)
 * - Scope :
 *   - This file contains THEME VALUES only.
 * - Rules :
 *   1. Theme > Brand     : Use `theme_` for UI, not `brand_`.
 *   2. No Components    : Tokens must not reference header, button, footer.
 *   3. No States        : Hover / focus handled in component CSS.
 *   4. No Duplication   : One meaning = one token.
 *   5. Add Only         : Never rename or repurpose existing tokens.
 *
 * WHAT (Token Classification)
 * - Theme Core (Identity)
 *   --color-primary
 *   --color-primary-dark
 *   --color-primary-light
 *
 * - Theme Contrast (On Theme)
 *   --color-contrast-light   (text/icons on dark theme bg)
 *   --color-contrast-dark    (text/icons on light theme bg)
 *
 * - Theme Support
 *   --color-secondary
 *   --color-accent
 *
 * - Ink (Utility, Non-Theme)
 *   --color-black
 *   --color-white
 *   --color-gray-*
 *
 * FORBIDDEN
 * - primary / secondary / tertiary naming
 * - color-white / color-black
 * - header-bg / btn-hover tokens
 *
 * GOLDEN RULE
 * - Theme defines appearance.
 * - Ink defines readability.
 * - Components define behavior.
 * ===========================================================================
 */
 :root {

    /* ========= FONTS ========= */
    --font-base: 'Playfair Display', system-ui, sans-serif;
    --font-heading: 'Playfair Display', system-ui, sans-serif;
    --font-secondary: 'DM Sans', system-ui, sans-serif;
  
    /* ========= Z-INDEX ========= */
    --z-index-header: 100;
    --z-index-dropdown: 200;
    --z-index-modal: 300;
  
    /* ========= COLORS ========= */
    --color-primary: #18193F;
    --color-primary-light: #474885;
    --color-primary-dark: #AE9588;
  
    --color-secondary: #A69E6F;
    --color-secondary-light: #ECE8DF;
    --color-secondary-ultra-light:#F1EFE8;
    --color-accent: #FCFAF8;
    --color-muted: #677E77;

  
    --color-black: #000;
    --color-white: #fff;
  
    --color-gray-100: #C0C0C0;
    --color-gray-500: #808080;
    --color-gray-900: #404040;

    --color-gradient-primary: linear-gradient(135.69deg, #FFFFFF 1.18%, #FEFDF0 6.52%, #FDFCE4 10.94%, #FDFAD8 16.81%, #FCF9C8 22.96%, #FBF7B7 30.4%, #F7F1AC 36.19%, #EBE3A3 42.54%, #D8D094 51.37%, #C7BE87 59.97%, #B1A877 71.95%, #A49C6D 78.75%, #968E62 86.15%, #8B835A 93.56%, #8B835A 100%);
  
    /* ========= RADIUS ========= */
    --border-radius-xxs: 2px;
    --border-radius-xs: 4px;
    --border-radius-sm: 8px;
    --border-radius-base: 12px;
    --border-radius-md: 16px;
    --border-radius-lg: 24px;
    --border-radius-xl: 32px;
  
    /* ========= SPACING ========= */
    --space-2xs: 2px;
    --space-xs: 4px;
    --space-sm: 8px;
    --space-base: 12px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 40px;
    --space-3xl: 48px;
    --space-4xl: 56px;
    --space-5xl: 64px;
    --space-6xl: 100px;
    --space-8xl: 128px;
    --space-9xl: 160px;
    --space-10xl: 200px;
  
    /* ========= LAYOUT ========= */
    --container-max-width: 1440px;
    --container-padding-y: 80px;
    --container-padding-x: 80px;
    --header-padding-y: 32px;
    --header-padding-x: 80px;
    --footer-padding-top: 64px;
    --footer-padding-bottom: 64px;
    --footer-padding-x: 80px;
    --form-padding: 0px;
  
    /* ========= EFFECTS ========= */
    --transition-fast: 0.3s ease;
    --transition-slow: 0.5s ease;
  
    /* ========= TYPOGRAPHY ========= */
    --font-size-xxs: 10px;
    --font-size-xs: 14px;
    --font-size-sm: 16px;
    --font-size-base: 18px;
    --font-size-md: 20px;
    --font-size-lg: 24px;
    --font-size-xl: 32px;
    --font-size-2xl: 48px;
    --font-size-3xl: 64px;
    --font-size-4xl: 80px;
  
    --font-weight-ultra-light: 200;
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    --font-weight-ultra-bold: 900;
  
    --line-height-xs: 1.2;
    --line-height-sm: 1.43;
    --line-height-base: 1.68;
    --line-height-md: 1.5;
    --line-height-lg: 1.7;
  
    /* (fixed line-height avoid karo, but keep if needed) */
    --line-height-fixed-xs: 24px;
    --line-height-fixed-sm: 26px;
    --line-height-fixed-base: 29px;
    --line-height-fixed-md: 34px;
    --line-height-fixed-lg: 40px;
  
  }