/* ============================================================
   NITRIK · Design Tokens · v0.3 (Sesión 3)
   Cambios vs. v0.2:
     · Monograma K refinado con Plank TTF original
     · Footer mobile: contacto pasa a ser colapsable
     · Sin cambios en tokens base · solo organización mejorada
   Última actualización: 2026-05-24
   ============================================================ */

:root {
  /* COLOR · Brand */
  --c-black:        #0D0D0D;
  --c-red:          #D92B2B;
  --c-red-bright:   #F20505;
  --c-yellow-gold:  #F2BB16;
  --c-yellow:       #F2CE16;
  --c-white:        #FFFFFF;

  /* COLOR · Neutrales */
  --c-gray-50:  #F7F7F7;
  --c-gray-100: #EFEFEF;
  --c-gray-200: #E5E5E5;
  --c-gray-300: #CDCDCD;
  --c-gray-500: #6B6B6B;
  --c-gray-700: #3F3F3F;
  --c-gray-900: #171717;

  /* COLOR · Semánticos */
  --c-success:    #15803D;
  --c-success-bg: #E6F4EB;
  --c-warning:    #E08A00;
  --c-error:      #D92B2B;
  --c-error-bg:   #FBE6E6;
  --c-info:       #1769AA;
  --c-info-bg:    #E6F0F8;
  --c-whatsapp:       #25D366;
  --c-whatsapp-hover: #1FB957;

  /* TEXTO / FONDO / BORDES semánticos */
  --text-primary:   var(--c-black);
  --text-secondary: var(--c-gray-700);
  --text-tertiary:  var(--c-gray-500);
  --text-inverse:   var(--c-white);
  --text-brand:     var(--c-red);
  --text-on-brand:  var(--c-white);
  --text-on-yellow: var(--c-black);
  --bg-page:        var(--c-white);
  --bg-subtle:      var(--c-gray-50);
  --bg-dark:        var(--c-black);
  --bg-brand:       var(--c-red);
  --bg-accent:      var(--c-yellow-gold);
  --border-default: var(--c-gray-200);
  --border-hover:   var(--c-gray-300);
  --border-focus:   var(--c-black);
  --border-focus-ring: var(--c-yellow-gold);
  --border-error:   var(--c-error);
  --border-success: var(--c-success);

  /* TIPOGRAFÍA */
  --font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;

  --fs-display-xl: 72px;
  --fs-display-lg: 56px;
  --fs-h1: 48px; --fs-h2: 36px; --fs-h3: 28px; --fs-h4: 22px;
  --fs-body-lg: 18px; --fs-body: 16px; --fs-body-sm: 14px; --fs-xs: 12px; --fs-button: 16px;
  --lh-tight: 1.05; --lh-snug: 1.15; --lh-heading: 1.2; --lh-body: 1.6; --lh-button: 1;
  --ls-tight: -0.02em; --ls-normal: 0; --ls-wide: 0.05em; --ls-wider: 0.1em;

  /* ESPACIADO */
  --space-0:0; --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:24px; --space-6:32px; --space-8:48px; --space-10:64px; --space-12:96px; --space-16:128px;

  /* RADIOS */
  --radius-none:0; --radius-sm:4px; --radius-md:6px; --radius-lg:12px; --radius-xl:16px; --radius-full:9999px;

  /* BORDES */
  --border-thin:1px; --border-medium:2px; --border-thick:3px;

  /* SOMBRAS */
  --shadow-xs: 0 1px 1px rgba(13,13,13,0.04);
  --shadow-sm: 0 1px 2px rgba(13,13,13,0.06);
  --shadow-md: 0 4px 6px rgba(13,13,13,0.08);
  --shadow-lg: 0 10px 24px rgba(13,13,13,0.12);
  --shadow-xl: 0 20px 40px rgba(13,13,13,0.16);
  --shadow-2xl: 0 28px 60px rgba(13,13,13,0.22);

  /* MOTION */
  --motion-fast:150ms; --motion-standard:250ms; --motion-slow:400ms; --motion-glacial:700ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* ICONOS */
  --icon-xs:12px; --icon-sm:16px; --icon-md:24px; --icon-lg:32px; --icon-xl:48px; --icon-2xl:64px;

  /* LAYOUT */
  --container-max: 1280px;
  --container-pad-mobile: 20px;
  --container-pad-tablet: 32px;
  --container-pad-desktop: 48px;
  --bp-tablet: 768px; --bp-desktop: 1024px; --bp-wide: 1440px;

  /* Header/Footer/Floating */
  --header-height-default: 80px;
  --header-height-sticky:  64px;
  --hero-min-height:       100vh;
  --hero-min-height-mobile:80vh;
  --wa-fab-size: 56px;
  --wa-fab-z: 1000;
  --wa-fab-offset: 20px;
}

@media (max-width: 767px) {
  :root {
    --fs-display-xl: 48px; --fs-display-lg: 40px; --fs-h1: 36px; --fs-h2: 28px;
    --fs-h3: 22px; --fs-h4: 18px; --fs-body-lg: 17px; --fs-body: 15px; --fs-body-sm: 13px; --fs-xs: 11px;
    --hero-min-height: var(--hero-min-height-mobile);
  }
}

.focus-ring { outline: 2px solid var(--c-yellow-gold); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  :root { --motion-fast:0ms; --motion-standard:0ms; --motion-slow:0ms; --motion-glacial:0ms; }
}