:root {
	/* Colours */
	--gblBlue: rgba(79,236,213,1);
	--gblPink: rgba(255, 143, 240,1);
	--gblBlack: rgba(0,0,0,1);
	--gblWhite: rgba(255,255,255,1);
	--gblDarkGrey: rgba(34,34,34,1);
	--gblGrey: rgba(128,128,128,1);
	--gblTextYellow: rgba(230,191,53,1);
	--gblTextBlack: rgba(30,30,30,1);
	--gblTextBlackShadow: rgba(0, 0, 0, 0.25);
	--gblTextWhite: rgba(217,217,217,1);
	--gblTextBoxBackground: rgba(0, 0, 0, 0.55);
	--gblGlassBorder: rgba(255, 255, 255, 0.25);

	/* File Paths */
  --imgIC-Logo: url("/static/images/icons/IC-Logo-Text.svg");
  --imgIC-Seed: url("/static/images/IC-Seed.png");
  --imgIC-Close: url("/static/images/icons/dismiss.svg");
  --imgIC-Hamburger: url("/static/images/icons/hamburger.svg");
  --imgIC-Search: url("/static/images/icons/search.svg");
  --imgIC-Shop-Splash: url("/static/images/HallowsEve.png");
  --imgIC-Logo-Text__svg: url("/static/images/icons/IC-Logo-Text.svg");
  --imgIC-Logo-NoText__svg: url("/static/images/icons/IC-Logo-NoText.svg");

	/* Padding & Spacing */
	--gblPadding: 2vw;
	--gblPaddingSmall: 1vw;
	--gblPaddingLarge: 3vw;
	--gblPaddingExtraLarge: 4vw;
	--gblPaddingHuge: 5vw;
	--gblPaddingDrawer: 3vw 2vw 2vw 2vw;
	--gblPaddingDrawerClamp: clamp(0.75rem, 2vw, 1rem);
	--gblPaddingSearchInput: clamp(0.5rem, 1.2vw, 1.5rem) clamp(2.5rem, 4vw, 5rem);
	--gblPaddingSidebar: clamp(1.25rem, 3vw, 2rem);
	--gblPaddingLink: clamp(0.9rem, 2vw, 1.2rem) clamp(0.6rem, 1.5vw, 1rem);
	--gblPaddingBadge: clamp(0.12rem, 0.3vw, 0.2rem) clamp(0.35rem, 0.6vw, 0.5rem);
	
	--gblMarginClose: clamp(0.8rem, 2vw, 1.2rem);
	--gblHoverIndent: clamp(1rem, 2.5vw, 1.5rem);

	/* Row Gaps & Vertical Spacing */
	--gblRowGap: 2vw;
	--gblRowGapSmall: 1vw;
	--gblRowGapMedium: 3vw;
	--gblRowGapLarge: 4vw;
	--gblSpaceUnit: clamp(0.5rem, 1.2vw, 0.8rem);

	/* Font Sizes */
	--gblFontSizeTiny: clamp(0.6rem, 1.5vw + 0.4vh, 1.5rem);
	--gblFontSizeSmall: clamp(0.8rem, 1.9vw + 0.7vh, 2rem);
	--gblFontSizeMedium: clamp(1rem, 2.1vw + 1.1vh, 2.4rem);
	--gblFontSizeLarge: clamp(1.5rem, 3vw + 1vh, 3rem);
	--gblFontSizeExtraLarge: clamp(2rem, 4vw + 1.5vh, 4rem);
	--gblFontSizeHuge: clamp(2.5rem, 5vw + 2vh, 5rem);
	--gblFontSizeGigantic: clamp(3rem, 6vw + 2.5vh, 6rem);
	--gblFontSizeMassive: clamp(3.5rem, 7vw + 3vh, 7rem);
	--gblFontSizeColossal: clamp(4rem, 8vw + 3.5vh, 8rem);
	--gblFontSizeTitanic: clamp(4.5rem, 9vw + 4vh, 9rem);
	--gblFontSizeBehemoth: clamp(5rem, 10vw + 4.5vh, 10rem);
	--gblFontSizeLeviathan: clamp(5.5rem, 11vw + 5vh, 11rem);
	--gblFontSizeGargantuan: clamp(6rem, 12vw + 5.5vh, 12rem);
	--gblFontSizeMonstrous: clamp(6.5rem, 13vw + 6vh, 13rem);
	--gblFontSizeEpic: clamp(7rem, 14vw + 6.5vh, 14rem);
	--gblFontSizeLegendary: clamp(7.5rem, 15vw + 7vh, 15rem);
	--gblFontSizeMythical: clamp(8rem, 16vw + 7.5vh, 16rem);
	--gblFontSizeGodlike: clamp(8.5rem, 17vw + 8vh, 17rem);
	--gblFontSizeDivine: clamp(9rem, 18vw + 8.5vh, 18rem);
	--gblFontSizeCelestial: clamp(9.5rem, 19vw + 9vh, 19rem);
	--gblFontSizeCosmic: clamp(10rem, 20vw + 9.5vh, 20rem);
	--gblFontSizeUniversal: clamp(10.5rem, 21vw + 10vh, 21rem);
	--gblFontSizeInfinite: clamp(11rem, 22vw + 10.5vh, 22rem);
	--gblFontSizeEternal: clamp(11.5rem, 23vw + 11vh, 23rem);
	--gblFontSizeTranscendent: clamp(12rem, 24vw + 11.5vh, 24rem);
	--gblFontSizeOmnipotent: clamp(12.5rem, 25vw + 12vh, 25rem);
	--gblFontSizeSupreme: clamp(13rem, 26vw + 12.5vh, 26rem);
	--gblFontSizeUltimate: clamp(13.5rem, 27vw + 13vh, 27rem);

	/* Functional Sizes */
	--gblHeaderHeightMin: clamp(3.75rem, 11vw, 9.375rem);
	--gblLogoSize: clamp(3.125rem, 9vw, 8.125rem);
	--gblPillSize: clamp(2rem, 6vw, 5rem);
	--gblSidebarWidth: clamp(18.75rem, 80vw, 28.125rem);
	--gblHeroContainerMaxWidth: clamp(20rem, 90vw, 85rem);
	--gblHeroHeightMin: clamp(25rem, 60vh, 45rem);
	--gblHeroButtonFlexBasis: clamp(10rem, 30vw, 12rem);
	--gblBorderThin: clamp(0.06rem, 0.1vw, 0.12rem);
	--gblIconClose: clamp(2rem, 5vw, 2.5rem);
	--gblSizePill: clamp(2.25rem, 5vw, 3.5rem);
	--gblSizeIcon: clamp(1rem, 2vw, 1.5rem);

	/* Font Families */
	--gblFontFamilyAgdasima: 'Agdasima', sans-serif;
	--gblFontFamilyRoboto: 'Roboto', sans-serif;

	/* Font Weights */
	--gblFontWeightThin: 100;
	--gblFontWeightExtraLight: 200;
	--gblFontWeightLight: 300;
	--gblFontWeightRegular: 400;
	--gblFontWeightMedium: 500;
	--gblFontWeightSemiBold: 600;
	--gblFontWeightBold: 700;
	--gblFontWeightExtraBold: 800;
	--gblFontWeightBlack: 900;

	/* Letter & Line Spacing */
	--gblLetterSpacingTitle: 0.05em;
	--gblLetterSpacingBody: 0.02em;
	--gblLineHeightTight: 1.1;
	--gblLineHeightNormal: 1.4;

	/* Backdrop Filters */
	--gblBackdropBlur: blur(0.15rem);

	/* Transitions & Animations */
	--gblTransitionStandard: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
	--gblButtonHoverTranslateY: -0.125rem;

	/* Gradients & Overlays */
	--gblHeroGradientOverlay: radial-gradient(
    circle at center,
    rgba(0, 0, 0, 0.15) 0%,
    rgba(0, 0, 0, 0.35) 50%,
    rgba(0, 0, 0, 0.55) 100%
  );

	/* Shadows */
	--gblHeaderShadow: 0px clamp(0.25rem, 0.5vw, 0.4rem) clamp(0.35rem, 0.8vw, 0.5rem) var(--gblTextBlackShadow);
	--gblSidebarShadow: clamp(0.25rem, 0.5vw, 0.4rem) 0 clamp(0.9rem, 2vw, 1.2rem) rgba(0,0,0,0.3);
	--gblTitleShadow: 0px clamp(0.12rem, 0.2vw, 0.2rem) clamp(0.25rem, 0.4vw, 0.35rem) var(--gblTextBlackShadow);
	--gblDrawerBoxShadow: 0 clamp(-0.6rem, -1vw, -1rem) clamp(1.8rem, 3vw, 2.5rem) rgba(0,0,0,0.2);
	--gblCardShadow: 0px clamp(0.5rem, 1vw, 1rem) clamp(1rem, 2vw, 2rem) rgba(0, 0, 0, 0.5);

	/* Background fades */
	--gblBackgroundFadeBlack: rgba(0, 0, 0, 0.7);
	--gblSurfaceDark: #1a1a1a;
	--gblCardDark: #121212;

	/* Border Radius */
	--gblBorderRadiusSmall: clamp(0.25rem, 0.5vw, 0.5rem);
	--gblBorderRadiusMedium: clamp(0.5rem, 1vw, 0.75rem);
	--gblBorderRadiusLarge: clamp(0.75rem, 1.5vw, 1rem);
	--gblBorderRadiusExtraLarge: clamp(1rem, 2vw, 1.5rem);
	--gblBorderRadiusHuge: clamp(1.5rem, 3vw, 2rem);
	--gblBorderRadiusGargantuan: clamp(1.8rem, 4vw, 2.5rem);

	/* Widths */
	--gblDataLabelWidth: clamp(9rem, 25vw, 18rem);

  /* Trust Bar Tokens */
  --gblTrustBarBackground: var(--gblDarkGrey);
  --gblTrustBarBorderColor: var(--gblGlassBorder);
  --gblTrustBarIconSize: clamp(1.75rem, 3.5vw, 2.5rem);
  --gblTrustBarGridGap: clamp(1.5rem, 3vw, 3rem);
  --gblTrustBarItemGap: clamp(0.75rem, 1.8vw, 1.25rem);
  --gblTrustBarPadding: clamp(1.25rem, 2.5vw, 2rem) var(--gblPadding);
  --gblTrustBarMinColumnWidth: clamp(18rem, 25vw, 22rem);
  --gblTrustBarIconGlow: 
    drop-shadow(0 0 clamp(0.15rem, 0.4vw, 0.35rem) var(--gblBlue)) 
    drop-shadow(0 0 clamp(0.4rem, 1vw, 0.8rem) rgba(79, 236, 213, 0.6));
  
  /* Category Showcase Tokens */
  --gblCategoryShowcasePadding: clamp(2rem, 5vw, 4rem) var(--gblPadding);
  --gblCategoryGridGap: clamp(1.25rem, 2.5vw, 2rem);
  --gblCategoryCardMinHeight: clamp(16rem, 30vh, 22rem);
  --gblCategoryCardMinColumnWidth: clamp(16rem, 22vw, 20rem);
  --gblCategoryCardBorderColor: var(--gblGlassBorder);
  --gblCategoryCardHoverBorderColor: var(--gblBlue);
  --gblCategoryBadgeBackground: rgba(0, 0, 0, 0.65);
  --gblCategoryOverlayGradient: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.95) 0%,
    rgba(0, 0, 0, 0.4) 60%,
    rgba(0, 0, 0, 0.1) 100%
  );

  /* Featured Carousel Specific Tokens */
  --gblCarouselPadding: clamp(2rem, 5vw, 4rem) var(--gblPadding);
  --gblCarouselTrackGap: clamp(1rem, 2vw, 1.5rem);
  --gblCarouselCardMinHeight: clamp(22rem, 45vh, 28rem);
  --gblCarouselControlSize: clamp(2.25rem, 5vw, 3rem);
  --gblCarouselDotSize: clamp(0.5rem, 1.2vw, 0.75rem);
  --gblCarouselDotActiveWidth: clamp(1.25rem, 3vw, 2rem);

  /* Articles Showcase Tokens */
  --gblArticlesShowcasePadding: clamp(2rem, 5vw, 4rem) var(--gblPadding);
  --gblArticlesGridGap: clamp(1.25rem, 2.5vw, 2rem);
  --gblArticleCardMinColumnWidth: clamp(16rem, 25vw, 22rem);
  --gblArticleCardImageHeight: clamp(10rem, 20vh, 14rem);
  
  /* Footer Tokens */
  --gblFooterBorder: 0.0625rem solid var(--gblGlassBorder);
  --gblFooterToggleSize: 0.5rem;

  /* Catalog Grid Tokens */
  --gblCatalogGridGap: clamp(1.25rem, 2.5vw, 2rem);
  --gblCatalogGridMinColumnWidth: clamp(16rem, 25vw, 22rem);

  /* Media Gallery Tokens */
  --gblGalleryMainAspect: 4 / 3;
  --gblGalleryThumbGridMinWidth: clamp(3.5rem, 8vw, 5.5rem);
  --gblGalleryGap: clamp(0.75rem, 1.5vw, 1.25rem);
  --gblGalleryPlayIconSize: clamp(1.5rem, 3vw, 2.25rem);
  --gblGalleryZoomIconSize: clamp(2.5rem, 5vw, 3.5rem);
  --gblGalleryActiveGlow: 0 0 clamp(0.5rem, 1vw, 1rem) var(--gblBlue), 0 0 clamp(0.2rem, 0.4vw, 0.5rem) var(--gblBlue);
  --gblGalleryVideoGlow: 0 0 clamp(0.5rem, 1vw, 1rem) var(--gblPink), 0 0 clamp(0.2rem, 0.4vw, 0.5rem) var(--gblPink);

  /* Product Form Tokens */
	--gblProductFormGap: clamp(1rem, 2vw, 1.5rem);
	--gblProductFormRowGap: clamp(0.5rem, 1vw, 0.75rem);
	--gblProductFormPadding: clamp(1.25rem, 2.5vw, 2rem);
	--gblProductFormValueColor: var(--gblWhite);
	--gblProductFormBorderColor: var(--gblGlassBorder);
	--gblProductFormButtonBackground: var(--gblBlue);
	--gblProductFormButtonTextColor: var(--gblTextBlack);
	--gblProductFormButtonGlow: 0 0 clamp(0.5rem, 1vw, 1rem) var(--gblBlue);

	/* Comments Section Tokens */
    --gblCommentAvatarSize: clamp(2rem, 4vw, 2.5rem);
    --gblCommentIndent: clamp(1rem, 3vw, 2.5rem);
    --gblCommentInputMinHeight: clamp(2.5rem, 5vh, 3.5rem);
    --gblCommentInputBg: #2b2d31;
    --gblCommentInputPlaceholder: #80848e;
    --gblCommentBadgeOpBg: var(--gblBlue);
    --gblCommentBadgeOpText: var(--gblTextBlack);
    --gblCommentTimestampColor: #949ba4;
    --gblCommentMentionBg: rgba(79, 236, 213, 0.15);
    --gblCommentMentionText: var(--gblBlue);
}