:root {
  /* ============================================================
     PHROnESIS IA SAS — Design Tokens
     Paleta de colores corporativa
     ============================================================ */

  /* Colores de marca — Azul noche profundo, plateado metálico y blanco */
  --color-navy:       #0F2C5C;   /* Azul marino elegante (acento principal) */
  --color-navy-dark:  #0A1128;   /* Azul noche profundo (footer, secciones oscuras) */
  --color-navy-xl:    #070D17;   /* Navy extremo (profundidad) */
  --color-navy-soft:  #E2E8F0;   /* Azul hielo claro (fondos suaves) */

  /* Teal Phronesis — derivado del logo (owl teal) */
  --color-teal:       #1CB4B0;
  --color-teal-hover: #2FD9D4;
  --color-teal-deep:  #0F3D46;
  --color-teal-light: rgba(28, 180, 176, 0.12);
  --color-navy-light: #E2E8F0;

  /* Ink oscuro base del sitio (matching video hero) */
  --ink:              #050B0D;
  --ink-2:            #0A1519;

  /* Acentos plateados / metálicos (reemplazan teal) */
  --silver:           #E2E8F0;   /* Plata claro - acentos y texto sobre oscuro */
  --silver-bright:    #FFFFFF;
  --steel:            #C0C0C0;   /* Gris metálico - bordes, iconos, badges */
  --silver-soft:      rgba(226, 232, 240, 0.10);
  --silver-border:    rgba(226, 232, 240, 0.30);

  /* Fondo del Hero, tarjetas de métricas y contacto (azul noche ultra oscuro) */
  --hero-bg:          #0A1128;
  --hero-card:        #111C2E;
  --contact-card:     #111A2E;

  /* Plata / neutrales */
  --color-silver:     #E2E8F0;   /* Plateado claro - fondos alternos */
  --color-silver-2:   #C0C0C0;   /* Gris metálico - bordes/separadores */
  --color-gray-dark:  #1B2A41;
  --color-gray-mid:   #1E293B;   /* Texto secundario en fondos claros */
  --color-gray-light: #94A3B8;
  --color-light:      #FFFFFF;   /* Fondo base (blanco) */
  --color-white:      #FFFFFF;
  --color-border:     #334155;
  --color-silver-text: rgba(255, 255, 255, 0.8); /* Texto sobre azul */

  /* Gradiente azul corporativo */
  --gradient-brand: linear-gradient(135deg, var(--color-navy) 0%, var(--color-navy-dark) 100%);

  /* Tipografía */
  --font-heading: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-family: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --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-weight-regular: 400;
  --font-weight-medium:  500;
  --font-weight-semibold:600;
  --font-weight-bold:    700;
  --font-weight-extrabold:800;

  /* Espaciado */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-8: 3rem;
  --space-10: 4rem;
  --space-12: 5rem;
  --space-16: 7rem;
  --space-20: 9rem;

  /* Radios */
  --radius-sm: 0.375rem;
  --radius-md: 0.625rem;
  --radius-lg: 1rem;
  --radius-full: 9999px;

  /* Sombras */
  --shadow-sm: 0 1px 2px rgba(10, 25, 47, 0.06);
  --shadow-md: 0 4px 6px -1px rgba(10, 25, 47, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(10, 25, 47, 0.12);
  --shadow-xl: 0 20px 25px -5px rgba(10, 25, 47, 0.15);

  /* Transiciones */
  --transition-fast: 0.2s ease;
  --transition-base: 0.3s ease;

  /* Animaciones */
  --anim-duration-fast: 0.3s;
  --anim-duration-base: 0.6s;
  --anim-duration-slow: 1s;
  --anim-delay-step: 80ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* Contenedor */
  --container-max: 1200px;
  --container-padding: 1.25rem;

  /* Z-index global */
  --z-header: 100;
  --z-fab: 900;
}