/* =============================
   CSS VARIABLES FOR WEBGARD PLATFORM
   Author: Webgard Team
   Description: Design System - Organized by Design Token Hierarchy
   ============================= */


/* =============================
   PRIMITIVE TOKENS (Base Values)
   ============================= */
:root {
  
  /* ----- Color Primitives ----- */
  --color-white: #fff;
  --color-black: #000;
  --color-gray-900: #222;
  --color-gray-700: #444;
  --color-transparent-black-10: rgba(0, 0, 0, 0.1);
  --color-transparent-black-70: rgba(0, 0, 0, 0.7);
  --color-transparent-white-20: rgba(255, 255, 255, 0.2);
  --color-transparent-white-60: rgba(255, 255, 255, 0.6);
  --color-transparent-white-80: rgba(255, 255, 255, 0.8);
  --color-transparent-white-100: rgba(255, 255, 255, 1);


  /* ----- Typography Primitives ----- */
  --font-family-primary: "Press Start 2P", "Courier New", monospace, sans-serif;
  
  /* Font Size Scale */
  --font-size-7: 7px;
  --font-size-9: 9px;
  --font-size-10: 10px;
  --font-size-12: 12px;
  --font-size-14: 14px;
  --font-size-16: 16px;
  --font-size-18: 18px;
  --font-size-23: 23px;
  --font-size-32: 32px;
  
  /* Line Height Scale */
  --line-height-none: 1;
  --line-height-tight: 1.6;
  --line-height-normal: 1.8;
  
  /* Letter Spacing Scale */
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 1px;


  /* ----- Spacing Scale ----- */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 10px;
  --space-4: 12px;
  --space-5: 16px;
  --space-6: 18px;
  --space-7: 20px;
  --space-8: 22px;
  --space-9: 24px;
  --space-10: 30px;
  --space-11: 32px;
  --space-12: 36px;
  --space-13: 40px;
  --space-14: 48px;
  --space-15: 60px;
  --space-16: 80px;
  --space-17: 85px;


  /* ----- Size Scale ----- */
  --size-icon-sm: 24px;
  --size-icon-md: 36px;
  --size-icon-lg: 48px;


  /* ----- Border Radius Scale ----- */
  --radius-none: 0;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-full: 50%;


  /* ----- Animation Duration ----- */
  --duration-fast: 0.2s;
  --duration-normal: 0.3s;
  --duration-slow: 0.5s;


  /* ----- Animation Timing ----- */
  --timing-ease: ease;
  --timing-ease-in-out: ease-in-out;


  /* ----- Z-Index Scale ----- */
  --zindex-base: 1;
  --zindex-elevated: 2;
  --zindex-dropdown: 5;
  --zindex-overlay: 10;
  --zindex-modal: 20;


  /* ----- Breakpoints ----- */
  --breakpoint-mobile: 600px;
  --breakpoint-tablet: 900px;
  --breakpoint-desktop: 1200px;

}


/* =============================
   SEMANTIC TOKENS (Light Theme)
   ============================= */
:root {
  
  /* ----- Color Semantics ----- */
  --color-background: var(--color-white);
  --color-foreground: var(--color-black);
  --color-text-primary: var(--color-gray-900);
  --color-text-secondary: var(--color-gray-700);
  --color-text-hover: var(--color-black);
  --color-text-muted: var(--color-transparent-black-70);
  --color-shadow-base: var(--color-transparent-black-10);


  /* ----- Typography Semantics ----- */
  --font-body: var(--font-family-primary);
  --font-heading: var(--font-family-primary);
  
  /* Component Font Sizes - Desktop */
  --font-size-entry-button: var(--font-size-23);
  --font-size-heading-main: var(--font-size-18);
  --font-size-heading-section: var(--font-size-12);
  --font-size-social-link: var(--font-size-10);
  --font-size-footer: var(--font-size-9);
  
  /* Component Font Sizes - Mobile */
  --font-size-entry-button-mobile: var(--font-size-16);
  --font-size-heading-section-mobile: var(--font-size-9);
  --font-size-social-link-mobile: var(--font-size-9);
  --font-size-footer-mobile: var(--font-size-9);


  /* ----- Spacing Semantics ----- */
  
  /* Gaps */
  --gap-social-links: var(--space-17);
  --gap-social-link: var(--space-3);
  --gap-content: var(--space-14);
  --gap-theme-toggle: var(--space-2);
  
  /* Gaps - Mobile */
  --gap-social-links-mobile: var(--space-8);
  --gap-social-link-mobile: var(--space-1);
  --gap-content-mobile: var(--space-11);
  
  /* Padding */
  --padding-content: var(--space-9);
  --padding-content-mobile: var(--space-5);
  --padding-content-top-mobile: var(--space-16);
  --padding-content-bottom-mobile: var(--space-13);
  --padding-theme-toggle-x: var(--space-4);
  --padding-theme-toggle-y: var(--space-1);
  --padding-entry-mobile: var(--space-3);
  --padding-section-mobile: var(--space-3);
  
  /* Margins */
  --margin-social-link: var(--space-3);
  --margin-footer-p: var(--space-1);
  --margin-footer-p-mobile: var(--space-1);


  /* ----- Layout Semantics ----- */
  --max-width-content: 960px;
  --position-theme-toggle-top: var(--space-9);
  --position-footer-bottom: var(--space-7);
  --position-footer-bottom-mobile: var(--space-5);


  /* ----- Shadow Semantics ----- */
  --shadow-text: 0px 0px 10px var(--color-shadow-base);
  --shadow-text-hover: 0px 0px 5px var(--color-shadow-base);


  /* ----- Effect Semantics ----- */
  --blur-backdrop: blur(10px);
  --opacity-default: 0.7;
  --opacity-full: 1;


  /* ----- Z-Index Semantics ----- */
  --zindex-theme-toggle: var(--zindex-overlay);


  /* ----- Transition Semantics ----- */
  --transition-color: color var(--duration-normal) var(--timing-ease);
  --transition-opacity: opacity var(--duration-fast) var(--timing-ease);
  --transition-background: background var(--duration-normal) var(--timing-ease);
  --transition-filter: filter var(--duration-slow) var(--timing-ease);
  --transition-theme: background var(--duration-normal), color var(--duration-normal);

}


/* =============================
   DARK THEME OVERRIDE
   ============================= */
[data-theme='dark'] {
  /* Color Overrides */
  --color-background: var(--color-black);
  --color-foreground: var(--color-white);
  --color-text-primary: var(--color-transparent-white-80);
  --color-text-secondary: var(--color-transparent-white-60);
  --color-text-hover: var(--color-transparent-white-100);
  --color-shadow-base: var(--color-transparent-white-20);
}