/* ============================================
   LABPROY - Core Stylesheet
   CSS Variables, Reset, Base Styles, and Layout
   ============================================ */

/* ============================================
   HOW TO CHANGE ACCENT COLORS
   ============================================

   To change the entire site's accent color:

   1. Update these 3 hex values (lines 30-33):
      --accent: #14dd69;
      --accent-light: #2ee37b;
      --accent-dark: #09ab4e;

   2. Update the RGB value (line 37):
      --accent-rgb: 20, 221, 105;
      (Convert your hex to RGB - e.g., #14dd69 = rgb(20, 221, 105))

   All opacity variants will automatically update!
   ============================================ */

/* ============================================
   HOW TO CHANGE FONT SIZES
   ============================================

   All font sizes are defined as CSS variables (lines 90-118).
   Update these to change typography across the entire site:

   Headings:
   --font-size-h1: clamp(50px, 9vw, 110px);  - Main heading
   --font-size-h2: clamp(32px, 4vw, 44px);   - Section headings
   --font-size-h3: clamp(20px, 2.5vw, 26px); - Subsections

   Body & UI:
   --font-size-base: 16px;  - Body text
   --font-size-sm: 14px;    - Small text, buttons
   --font-size-xs: 13px;    - Extra small
   --font-size-2xs: 12px;   - Code, labels
   --font-size-3xs: 11px;   - Tiny text

   All instances will automatically update!
   ============================================ */

/* CSS Variables */
:root {
    --primary: #0a0a0f;
    --primary-dark: #050508;
    --secondary: #ffffff;

    /* Accent Colors - Change these hex values to update the entire theme */
    --accent: #14dd69;
    --accent-light: #2ee37b;
    --accent-dark: #09ab4e;

    /* Accent RGB values - Update these when changing accent colors */
    /* For #14dd69: rgb(20, 221, 105) */
    --accent-rgb: 20, 221, 105;

    /* Accent Opacity Variants - Derived from --accent-rgb */
    --accent-03: rgba(var(--accent-rgb), 0.03);
    --accent-05: rgba(var(--accent-rgb), 0.05);
    --accent-06: rgba(var(--accent-rgb), 0.06);
    --accent-08: rgba(var(--accent-rgb), 0.08);
    --accent-10: rgba(var(--accent-rgb), 0.1);
    --accent-12: rgba(var(--accent-rgb), 0.12);
    --accent-15: rgba(var(--accent-rgb), 0.15);
    --accent-20: rgba(var(--accent-rgb), 0.2);
    --accent-30: rgba(var(--accent-rgb), 0.3);
    --accent-40: rgba(var(--accent-rgb), 0.4);

    /* Legacy variables for backward compatibility */
    --accent-dim: rgba(var(--accent-rgb), 0.08);
    --accent-glow: rgba(var(--accent-rgb), 0.15);

    /* Feature Card Colors - Bright colors for individual card styling */
    --feature-color-1: #3b82f6;  /* Bright Blue */
    --feature-color-2: #8b5cf6;  /* Bright Purple */
    --feature-color-3: #ec4899;  /* Bright Pink */
    --feature-color-4: #f59e0b;  /* Bright Orange */
    --feature-color-5: #10b981;  /* Bright Emerald */
    --feature-color-6: #06b6d4;  /* Bright Cyan */
    --feature-color-7: #f97316;  /* Bright Deep Orange */
    --feature-color-8: #6366f1;  /* Bright Indigo */
    --feature-color-9: #14b8a6;  /* Bright Teal */

    --gray-50: #fafafa;
    --gray-100: #f4f4f5;
    --gray-200: #e4e4e7;
    --gray-300: #d4d4d8;
    --gray-400: #a1a1aa;
    --gray-500: #71717a;
    --gray-600: #52525b;
    --gray-700: #3f3f46;
    --gray-800: #27272a;
    --gray-850: #1a1a22;
    --gray-900: #0f1418;
    --gray-950: #0c0e10;

    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 20px;
    --radius-2xl: 28px;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.5);
    --shadow-glow: 0 0 60px var(--accent-15);

    --transition-fast: 150ms ease;
    --transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);
    --navbar-background: rgba(10, 10, 15, 0.8);
    --navbar-scrolled-background: rgba(10, 10, 15, 0.9);
    --navbar-blur: 20px;

    --font-sans: "sofia-pro", sans-serif;
    --font-mono: "calling-code", monospace;

    --font-weight-regular: 400;
    --font-weight-medium: 600;
    --font-weight-bold: 700;

    /* Font Sizes - Responsive using clamp() */
    /* Headings */
    --font-size-h1: clamp(50px, 9vw, 110px);
    --font-size-h1-interior: clamp(40px, 8vw, 75px);
    --font-size-h1-mobile: clamp(48px, 9vw, 70px);
    --font-size-h2: clamp(32px, 4vw, 44px);
    --font-size-h2-mobile: clamp(28px, 6vw, 36px);
    --font-size-h3: clamp(20px, 2.5vw, 26px);
    --font-size-h4: 18px;

    /* Display sizes */
    --font-size-display: 28px;
    --font-size-display-mobile: 28px;
    --font-size-display-big: 40px;

    /* Body & UI */
    --font-size-base: 16px;
    --font-size-lg: 1.3rem;        /* ~17.6px */
    --font-size-md: 15px;
    --font-size-sm: 14px;
    --font-size-xs: 13px;
    --font-size-2xs: 12px;
    --font-size-3xs: 11px;
    --font-size-4xs: 10px;

    /* Specific use cases */
    --font-size-logo: 22px;
    --font-size-stat: 50px;
    --font-size-stat-mobile: 40px;
    --font-size-icon-lg: 20px;
    --font-size-icon-md: 18px;

    /* Service Hero Layout */
    --hero-service-max-width: 1200px;
    --hero-service-gap: 100px;
    --hero-service-col-left: 45%;
    --hero-service-col-right: 55%;
    --hero-service-text-color: var(--gray-400);
    --hero-service-h1-margin: 24px;
    --hero-service-p-margin: 32px;
    --hero-service-cta-margin: 32px;

    /* Service Hero Tagline */
    --hero-service-tagline-size: clamp(20px, 3vw, 32px);
    --hero-service-tagline-color: var(--accent);
    --hero-service-tagline-weight: var(--font-weight-bold);
    --hero-service-tagline-line-height: 1.3;
    --hero-service-tagline-margin: 32px;

    /* Common Gradients */
    --gradient-dark-bg: linear-gradient(145deg, #0f1418, #0c0e10);
    --gradient-accent: linear-gradient(135deg, var(--accent), var(--accent-dark));
    --gradient-accent-glow: radial-gradient(circle at center, var(--accent-08) 0%, transparent 60%);
    --gradient-accent-glow-strong: radial-gradient(circle at center, var(--accent-12) 0%, transparent 70%);
    --gradient-top-border: linear-gradient(90deg, transparent, var(--accent), transparent);
    --gradient-shimmer: linear-gradient(135deg, #fff 0%, #ccc 50%, #fff 100%);
    --gradient-section-dark: linear-gradient(180deg, var(--gray-950) 0%, var(--primary) 100%);
    --gradient-cta-bg: linear-gradient(135deg, var(--gray-950) 0%, var(--primary-dark) 100%);

    /* Desarrollo Web landing-page tokens */
    --web-surface: rgba(15, 20, 24, 0.88);
    --web-surface-soft: rgba(255, 255, 255, 0.03);
    --web-surface-medium: rgba(255, 255, 255, 0.06);
    --web-surface-strong: rgba(255, 255, 255, 0.1);
    --web-border: rgba(255, 255, 255, 0.08);
    --web-border-strong: rgba(255, 255, 255, 0.14);
    --web-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
    --web-space-2xs: 4px;
    --web-space-xs: 8px;
    --web-space-sm: 12px;
    --web-space-md: 16px;
    --web-space-lg: 24px;
    --web-space-xl: 32px;
    --web-space-2xl: 48px;
    --web-space-3xl: 64px;
    --web-space-4xl: 96px;
    --web-content-narrow: 1000px;
    --web-visual-width: 560px;
    --web-visual-height: 470px;
    --web-icon-size: 52px;
    --web-logo-height: 56px;
    --web-control-size: 42px;
    --web-line-thin: 1px;
    --web-line-medium: 2px;
    --web-float-distance: 10px;
}

/* Reset & Base */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

::selection {
    color: var(--primary-dark);
    background: var(--accent);
    text-shadow: none;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    overflow-x: clip;
    width: 100%;
    max-width: 100vw;
}

body {
    font-family: var(--font-sans);
    font-size: var(--font-size-base);
    line-height: 1.6;
    color: #e0e0e0;
    background-color: var(--primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: clip;
    width: 100%;
    max-width: 100vw;
}

/* ============================================
   Animated Background Effects
   ============================================ */

.bg-grid {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
            linear-gradient(var(--accent-03) 1px, transparent 1px),
            linear-gradient(90deg, var(--accent-03) 1px, transparent 1px);
    background-size: 60px 60px;
    pointer-events: none;
    z-index: -2;
}

/* Floating Glowing Orbs */
.orb {
    position: fixed;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
    z-index: -1;
    animation: float 20s ease-in-out infinite;
    will-change: transform;
}

.orb-1 {
    width: 700px;
    height: 700px;
    background: radial-gradient(circle, var(--accent-12) 0%, transparent 70%);
    top: -300px;
    right: -200px;
    animation-delay: 0s;
}

.orb-2 {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, var(--accent-08) 0%, transparent 70%);
    bottom: -150px;
    left: -150px;
    animation-delay: -10s;
}

.orb-3 {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(93, 234, 219, 0.06) 0%, transparent 70%);
    top: 40%;
    left: 30%;
    animation-delay: -5s;
}

@keyframes float {
    0%, 100% { transform: translate(0, 0) scale(1); }
    25% { transform: translate(30px, -30px) scale(1.05); }
    50% { transform: translate(-20px, 20px) scale(0.95); }
    75% { transform: translate(20px, 30px) scale(1.02); }
}

img, video {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
}

/* ============================================
   Layout
   ============================================ */

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

.container-lg {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 24px;
}

.section {
    padding: 100px 0;
    position: relative;
}

.section-sm {
    padding: 80px 0;
}

.section-dark {
    background: var(--gradient-section-dark);
}

/* ============================================
   Typography
   ============================================ */

h1, h2, h3, h4, h5, h6 {
    font-weight: var(--font-weight-medium);
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: #fff;
}

h1 { font-size: var(--font-size-h1); font-weight: var(--font-weight-bold); }
h2 { font-size: var(--font-size-h2); }
h3 { font-size: var(--font-size-h3); }
h4 { font-size: var(--font-size-h4); }

.text-gradient {
    background: var(--gradient-shimmer);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: shimmer 3s linear infinite;
}

@keyframes shimmer {
    0% { background-position: 0% center; }
    100% { background-position: 200% center; }
}

.text-accent {
    color: var(--accent);
}

.text-muted {
    color: var(--gray-500);
}

.text-center {
    text-align: center;
}

p {
    margin-bottom: 1rem;
    line-height: 1.7;
}

/* ============================================
   Utility Classes
   ============================================ */

.mb-1 { margin-bottom: 8px; }
.mb-2 { margin-bottom: 16px; }
.mb-3 { margin-bottom: 24px; }
.mb-4 { margin-bottom: 32px; }
.mb-5 { margin-bottom: 40px; }

.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 24px; }
.mt-4 { margin-top: 32px; }
.mt-5 { margin-top: 40px; }