/* CSS Custom Properties - Theme System */

/* Font Face Declarations */
@font-face {
  font-family: 'TeX Gyre Heros';
  src: url('../fonts/texgyreheros-bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Maison Neue Mono';
  src: url('../fonts/Maison Neue Mono.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Colors - Grainy Black & White with Red Accents */
  --color-black: #0a0a0a;
  --color-bg-black: #1c1c1c;
  --color-white: #ffffff;
  --color-bg-white: #f3f2ee;
  --color-off-white: #f3f2ee;
  --color-gray-dark: #1a1a1a;
  --color-gray-medium: #666666;
  --color-gray-light: #cccccc;
  --color-accent-red: #d32f2f;
  --color-accent-red-dark: #b71c1c;
  --color-accent-red-light: #ff6659;

  /* Typography */
  --font-primary: 'Maison Neue Mono', 'Monaco', 'Consolas', monospace;
  --font-heading: 'TeX Gyre Heros', 'Helvetica', 'Arial', sans-serif;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  /* Font Sizes */
  --font-size-xs: 0.75rem;        /* 12px */
  --font-size-sm: 0.875rem;       /* 14px */
  --font-size-base: 1rem;         /* 16px */
  --font-size-lg: 1.125rem;       /* 18px */
  --font-size-xl: 1.25rem;        /* 20px */
  --font-size-2xl: 1.5rem;        /* 24px */
  --font-size-3xl: 1.875rem;      /* 30px */
  --font-size-4xl: 2.25rem;       /* 36px */
  --font-size-5xl: 3rem;          /* 48px */
  --font-size-6xl: 3.75rem;       /* 60px */
  --font-size-7xl: 4.5rem;        /* 72px */
  --font-size-8xl: 6rem;          /* 96px */

  /* Line Heights */
  --line-height-tight: 1.1;
  --line-height-snug: 1.3;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.6;
  --line-height-loose: 1.8;

  /* Spacing (Squarespace pattern) */
  --sqs-site-gutter: 4vw;
  --sqs-mobile-site-gutter: 6vw;
  --sqs-site-max-width: 1357px;
  --section-padding-vertical: clamp(4rem, 6vmax, 8rem);
  --section-padding-horizontal: var(--sqs-site-gutter);

  /* Grid System */
  --grid-columns-mobile: 8;
  --grid-columns-desktop: 24;
  --grid-gap-mobile: 11px;
  --grid-gap-desktop: 20px;

  /* Animations */
  --animation-duration-fast: 0.3s;
  --animation-duration: 0.8s;
  --animation-duration-slow: 1.2s;
  --animation-delay: 0.6s;
  --animation-easing: cubic-bezier(0.4, 0, 0.2, 1);
  --animation-easing-in: cubic-bezier(0.4, 0, 1, 1);
  --animation-easing-out: cubic-bezier(0, 0, 0.2, 1);

  /* Effects */
  --grain-opacity: 0.15;
  --overlay-opacity: 0.3;
  --blur-amount: 10px;

  /* Border Radius */
  --border-radius-sm: 4px;
  --border-radius: 8px;
  --border-radius-lg: 12px;
  --border-radius-xl: 16px;

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

  /* Z-index Scale */
  --z-index-dropdown: 1000;
  --z-index-sticky: 1020;
  --z-index-fixed: 1030;
  --z-index-modal-backdrop: 1040;
  --z-index-modal: 1050;
  --z-index-popover: 1060;
  --z-index-tooltip: 1070;

  /* Breakpoints (for JS usage) */
  --breakpoint-mobile: 767px;
  --breakpoint-tablet: 768px;
  --breakpoint-desktop: 1024px;
  --breakpoint-large: 1357px;
}

/* Dark theme section overrides */
[data-theme="dark"] {
  --theme-bg: var(--color-bg-black);
  --theme-text: var(--color-white);
  --theme-accent: var(--color-accent-red);
}

/* Bright theme section overrides */
[data-theme="bright"] {
  --theme-bg: var(--color-off-white);
  --theme-text: var(--color-black);
  --theme-accent: var(--color-accent-red);
}

/* Dark bold theme section overrides */
[data-theme="dark-bold"] {
  --theme-bg: var(--color-bg-black);
  --theme-text: var(--color-white);
  --theme-accent: var(--color-accent-red-light);
}