/**
 * glut.at Design Tokens
 * Extracted from production website
 * Last Updated: 2025-10-30
 */

:root {
  /* ========================================
     COLORS
     ======================================== */

  /* Brand Colors */
  --color-brand-red: #FF1900;
  --color-brand-black: #000000;
  --color-brand-white: #FFFFFF;

  /* Background Colors */
  --color-bg-primary: #000000;          /* Black */
  --color-bg-secondary: #FF1900;        /* Red */
  --color-bg-light: #FFFFFF;            /* White */
  --color-bg-gray: #f5f5f5;            /* Light gray */

  /* Text Colors */
  --color-text-primary: #FFFFFF;        /* White on dark */
  --color-text-secondary: #000000;      /* Black on light */
  --color-text-muted: #808080;          /* Gray */
  --color-text-accent: #FF1900;         /* Red accent */

  /* Interactive Colors */
  --color-link-default: #FFFFFF;
  --color-link-hover: #FF1900;
  --color-link-active: #FF1900;
  --color-button-primary: #FF1900;
  --color-button-hover: #CC1400;        /* Darker red */

  /* Overlay Colors */
  --color-overlay-dark: rgba(0, 0, 0, 0.7);
  --color-overlay-red: rgba(255, 25, 0, 0.9);
  --color-overlay-light: rgba(255, 255, 255, 0.9);

  /* Border Colors */
  --color-border-default: #1a1a1a;
  --color-border-light: #e0e0e0;
  --color-border-accent: #FF1900;


  /* ========================================
     TYPOGRAPHY
     ======================================== */

  /* Font Families */
  --font-primary: 'PPGoshaSans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-script: 'UltraSystemScript', cursive;
  --font-fallback: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;

  /* Font Sizes - Desktop */
  --font-size-hero: 80px;               /* Hero headlines */
  --font-size-h1: 60px;                 /* Page titles */
  --font-size-h2: 48px;                 /* Section headings */
  --font-size-h3: 36px;                 /* Subsection headings */
  --font-size-h4: 24px;                 /* Card titles */
  --font-size-h5: 20px;                 /* Small headings */
  --font-size-body: 16px;               /* Body text */
  --font-size-small: 14px;              /* Small text */
  --font-size-nav: 18px;                /* Navigation items */
  --font-size-caption: 12px;            /* Captions */

  /* Font Sizes - Mobile */
  --font-size-hero-mobile: 48px;
  --font-size-h1-mobile: 36px;
  --font-size-h2-mobile: 28px;
  --font-size-h3-mobile: 24px;
  --font-size-h4-mobile: 20px;
  --font-size-body-mobile: 16px;
  --font-size-nav-mobile: 16px;

  /* Fluid Font Sizes - CSS clamp() for smooth scaling across viewports */
  --font-size-fluid-hero: clamp(48px, 8vw + 1rem, 120px);
  --font-size-fluid-h1: clamp(36px, 5vw + 1rem, 80px);
  --font-size-fluid-h2: clamp(28px, 4vw + 0.5rem, 60px);
  --font-size-fluid-h3: clamp(24px, 3vw + 0.5rem, 48px);
  --font-size-fluid-h4: clamp(20px, 2vw + 0.5rem, 36px);
  --font-size-fluid-h5: clamp(18px, 1.5vw + 0.5rem, 24px);
  --font-size-fluid-body: clamp(14px, 1vw + 0.5rem, 18px);
  --font-size-fluid-nav: clamp(18px, 1.8vw + 0.25rem, 28px);
  --font-size-fluid-small: clamp(12px, 1vw + 0.25rem, 16px);

  /* Font Weights */
  --font-weight-normal: 400;
  --font-weight-bold: 700;
  --font-weight-black: 900;

  /* Line Heights */
  --line-height-tight: 1.1;             /* Headlines */
  --line-height-normal: 1.5;            /* Body text */
  --line-height-relaxed: 1.8;           /* Long-form content */

  /* Letter Spacing */
  --letter-spacing-tight: -0.02em;      /* Large headlines */
  --letter-spacing-normal: 0;           /* Body text */
  --letter-spacing-wide: 0.05em;        /* Navigation */


  /* ========================================
     SPACING
     ======================================== */

  /* Base Unit */
  --spacing-unit: 8px;

  /* Spacing Scale */
  --spacing-xs: 8px;                    /* 1 unit */
  --spacing-sm: 16px;                   /* 2 units */
  --spacing-md: 24px;                   /* 3 units */
  --spacing-lg: 32px;                   /* 4 units */
  --spacing-xl: 48px;                   /* 6 units */
  --spacing-2xl: 64px;                  /* 8 units */
  --spacing-3xl: 96px;                  /* 12 units */
  --spacing-4xl: 128px;                 /* 16 units */

  /* Layout Spacing */
  --header-height: 150px;
  --header-height-desktop: 150px;
  --header-height-tablet-landscape: 120px;
  --header-height-tablet-portrait: 100px;
  --header-height-mobile: 100px;
  --footer-height: auto;
  --content-padding-x-desktop: 48px;
  --content-padding-x-small-desktop: 40px;
  --content-padding-x-tablet: 32px;
  --content-padding-x-mobile: 24px;
  --content-padding-y: 64px;
  --section-gap: 96px;

  /* Intermediate Breakpoint Spacing */
  --spacing-section-desktop: 96px;
  --spacing-section-tablet: 64px;
  --spacing-section-mobile: 48px;
  --spacing-container-tablet: 32px;
  --spacing-container-small-desktop: 48px;

  /* Grid Spacing */
  --grid-gap: 24px;
  --grid-gap-mobile: 16px;
  --column-gap: 32px;


  /* ========================================
     LAYOUT
     ======================================== */

  /* Breakpoints */
  --breakpoint-mobile: 768px;
  --breakpoint-tablet: 1024px;
  --breakpoint-desktop: 1440px;
  --breakpoint-wide: 1920px;

  /* Container Widths */
  --container-max-width: 1600px;
  --content-max-width: 1200px;
  --text-max-width: 720px;
  --narrow-max-width: 960px;

  /* Grid Columns */
  --grid-columns-mobile: 1;
  --grid-columns-tablet-portrait: 2;
  --grid-columns-tablet-landscape: 3;
  --grid-columns-small-desktop: 3;
  --grid-columns-desktop: 4;

  /* Z-Index Scale */
  --z-index-base: 1;
  --z-index-dropdown: 100;
  --z-index-sticky: 200;
  --z-index-fixed: 300;
  --z-index-modal-backdrop: 400;
  --z-index-modal: 500;
  --z-index-popover: 600;
  --z-index-tooltip: 700;


  /* ========================================
     TRANSITIONS & ANIMATIONS
     ======================================== */

  /* Durations */
  --transition-fast: 150ms;
  --transition-normal: 300ms;
  --transition-slow: 500ms;

  /* Easing Functions */
  --easing-default: ease;
  --easing-in: ease-in;
  --easing-out: ease-out;
  --easing-in-out: ease-in-out;

  /* Common Transitions */
  --transition-color: color var(--transition-fast) var(--easing-default);
  --transition-background: background-color var(--transition-normal) var(--easing-default);
  --transition-transform: transform var(--transition-normal) var(--easing-out);
  --transition-opacity: opacity var(--transition-normal) var(--easing-default);


  /* ========================================
     SHADOWS & EFFECTS
     ======================================== */

  /* Box Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);

  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-full: 9999px;


  /* ========================================
     COMPONENT-SPECIFIC
     ======================================== */

  /* Header/Navigation */
  --nav-item-padding: var(--spacing-lg);
  --nav-transition: var(--transition-color);

  /* Buttons */
  --button-padding-x: var(--spacing-lg);
  --button-padding-y: var(--spacing-sm);
  --button-border-radius: var(--radius-sm);

  /* Cards */
  --card-padding: var(--spacing-lg);
  --card-border-radius: var(--radius-md);
  --card-shadow: var(--shadow-md);

  /* Images */
  --image-overlay-opacity: 0.6;
  --image-transition: var(--transition-opacity);
}