/*
 * VRPL Website - Bio-Industrial Fusion Design System
 * Premium color palette, typography, and design tokens
 */

:root {
  /* ========================================
     COLOR PALETTE - Bio-Industrial Fusion
     ======================================== */

  /* Copper Series - Warm industrial accents */
  --copper-dark: #6A3E2C;
  --copper-medium: #9C6A4A;
  --copper-light: #C89F80;
  --copper-glow: rgba(156, 106, 74, 0.4);

  /* Eco-Green Series - Nature & sustainability */
  --forest-green: #1C3B2C;
  --moss-green: #496D53;
  --light-green: #A7C8A1;
  --green-glow: rgba(73, 109, 83, 0.6);

  /* Metallic Grays - Industrial foundation */
  --steel-gray: #2E2E2E;
  --charcoal: #1C1C1C;
  --industrial-silver: #C7C7C7;
  --aluminum: #DCD7D0;

  /* Functional Colors */
  --background-dark: #1C1C1C;
  --background-medium: #2E2E2E;
  --background-light: #3A3A3A;
  --text-primary: #FFFFFF;
  --text-secondary: #DCD7D0;
  --text-tertiary: #C7C7C7;
  --text-accent: #C89F80;

  /* Gradients */
  --gradient-copper: linear-gradient(135deg, var(--copper-medium), var(--copper-light));
  --gradient-green: linear-gradient(135deg, var(--forest-green), var(--moss-green));
  --gradient-industrial: linear-gradient(145deg, var(--steel-gray), var(--background-light));
  --gradient-overlay: linear-gradient(135deg, rgba(28, 59, 44, 0.85), rgba(46, 46, 46, 0.9));
  --gradient-hero: linear-gradient(180deg, rgba(28, 28, 28, 0.4) 0%, rgba(28, 28, 28, 0.8) 100%);
  --gradient-copper-streak: linear-gradient(45deg, transparent 0%, var(--copper-medium) 50%, transparent 100%);

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

  /* Font Families */
  --font-primary: 'Inter', 'Helvetica Neue', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Space Grotesk', 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;

  /* Fluid Type Scale - Responsive typography */
  --text-xs: clamp(0.75rem, 1vw, 0.875rem);          /* 12px-14px */
  --text-sm: clamp(0.875rem, 1.2vw, 1rem);           /* 14px-16px */
  --text-base: clamp(1rem, 1.5vw, 1.125rem);         /* 16px-18px */
  --text-lg: clamp(1.125rem, 2vw, 1.375rem);         /* 18px-22px */
  --text-xl: clamp(1.375rem, 2.5vw, 1.75rem);        /* 22px-28px */
  --text-2xl: clamp(1.75rem, 3vw, 2.25rem);          /* 28px-36px */
  --text-3xl: clamp(2.25rem, 4vw, 3rem);             /* 36px-48px */
  --text-4xl: clamp(3rem, 6vw, 4.5rem);              /* 48px-72px */
  --text-5xl: clamp(3.5rem, 8vw, 6rem);              /* 56px-96px */

  /* Font Weights */
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-black: 900;

  /* Line Heights */
  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;
  --leading-loose: 2;

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

  --space-xs: 0.5rem;      /* 8px */
  --space-sm: 1rem;        /* 16px */
  --space-md: 1.5rem;      /* 24px */
  --space-lg: 2rem;        /* 32px */
  --space-xl: 3rem;        /* 48px */
  --space-2xl: 4rem;       /* 64px */
  --space-3xl: 6rem;       /* 96px */
  --space-4xl: 7.5rem;     /* 120px */
  --space-5xl: 10rem;      /* 160px */

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

  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
  --container-2xl: 1536px;
  --container-max: 1600px;

  /* ========================================
     BORDER RADIUS
     ======================================== */

  --radius-sm: 0.25rem;    /* 4px */
  --radius-md: 0.5rem;     /* 8px */
  --radius-lg: 0.75rem;    /* 12px */
  --radius-xl: 1rem;       /* 16px */
  --radius-2xl: 1.5rem;    /* 24px */
  --radius-full: 9999px;

  /* ========================================
     SHADOWS & GLOWS
     ======================================== */

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.2);
  --shadow-xl: 0 12px 32px rgba(0, 0, 0, 0.25);
  --shadow-2xl: 0 24px 48px rgba(0, 0, 0, 0.3);

  /* Glow Effects */
  --shadow-glow-copper: 0 0 24px var(--copper-glow);
  --shadow-glow-copper-lg: 0 0 40px var(--copper-glow), 0 0 80px rgba(156, 106, 74, 0.2);
  --shadow-glow-green: 0 0 24px var(--green-glow);
  --shadow-glow-green-lg: 0 0 40px var(--green-glow), 0 0 80px rgba(73, 109, 83, 0.2);

  /* Inner Shadows */
  --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.2);
  --shadow-inner-lg: inset 0 4px 8px rgba(0, 0, 0, 0.3);

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

  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --transition-smooth: 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94);

  /* Easing Functions */
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* ========================================
     Z-INDEX SCALE
     ======================================== */

  --z-base: 1;
  --z-dropdown: 10;
  --z-sticky: 50;
  --z-fixed: 100;
  --z-overlay: 1000;
  --z-modal: 2000;
  --z-tooltip: 3000;

  /* ========================================
     EFFECTS
     ======================================== */

  --backdrop-blur: blur(10px);
  --backdrop-blur-lg: blur(20px);

  /* Noise Texture (for subtle grain effect) */
  --texture-noise: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='3' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E");

  /* Hexagon Pattern */
  --pattern-hexagon: url("data:image/svg+xml,%3Csvg width='28' height='49' viewBox='0 0 28 49' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%239C6A4A' fill-opacity='0.05'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* Dark mode adjustments (if needed in future) */
@media (prefers-color-scheme: dark) {
  :root {
    /* Already dark by default, but we can enhance here */
  }
}