/**
 * ===========================================================================
 * 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: 'Inter', system-ui, sans-serif;
  --font-heading: 'Inter', system-ui, sans-serif;
  --font-secondary: 'Inter', system-ui, sans-serif;

  /* ========= Z-INDEX ========= */
  --z-index-header: 100;
  --z-index-dropdown: 200;
  --z-index-modal: 300;

  /* ========= COLORS ========= */
  --color-primary: #1C1E22;
  --color-primary-light: #666666;
  --color-primary-ultra-light: #616163;

  --color-secondary: #B49764;
  --color-accent: #F2F2F2;
  --color-accent-light: #F1F2F7;
  --color-muted: #727272;


  --color-black: #000;
  --color-black-80: #000000CC;
  --color-black-60: #727272;
  --color-white: #FFFFFF;
  --color-white-70: #FFFFFFB2;
  --color-white-50: #FFFFFF80;

  --color-gray-100: #C0C0C0;
  --color-gray-500: #808080;
  --color-gray-900: #404040;

  /* ========= 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;
  
  --container-padding-y-mobile: 48px;
  --container-padding-x-mobile: 16px;

  --container-padding-y-tablet: 32px;
  --container-padding-x-tablet: 32px;

  --container-padding-y-md: 64px;
  --container-padding-x-md: 64px;

  --container-padding-y-sm: 24px;
  --container-padding-x-sm: 24px;

  --container-padding-y-md-mobile: 16px;
  --container-padding-x-md-mobile: 16px;

  --header-padding-y: 40px;
  --header-padding-x: 64px;

  --header-padding-y-mobile: 16px;
  --header-padding-x-mobile: 16px;

  --footer-padding-top: 80px;
  --footer-padding-bottom: 32px;
  --footer-padding-x: 80px;
  
  --footer-padding-top-mobile: 48px;
  --footer-padding-bottom-mobile: 48px;

  --form-padding: 0px;
  --icon-size-md: 32px;
  --team-thumb-size: 150px;

  /* ========= EFFECTS ========= */
  --transition-fast: 0.3s ease;
  --transition-slow: 0.5s ease;

  /* ========= TYPOGRAPHY ========= */
  --font-size-xxs: 10px;
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-base: 16px;
  --font-size-md: 20px;
  --font-size-lg: 24px;
  --font-size-xl: 28px;
  --font-size-2xl: 48px;
  --font-size-3xl: 60px;
  --font-size-4xl: 64px;
  --font-size-5xl: 96px;

  --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-xxs: 1.1;
  --line-height-xs: 1.2;
  --line-height-sm: 1.4;
  --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;
}