/* ============================================================
   LINA — Design tokens
   Copied from the Lina Design System FINAL (colors_and_type.css).
   This is the source of truth for color, type, spacing, radii,
   shadow and motion values used across styles.css — change values
   here, not in styles.css.
   ============================================================ */

@font-face {
  font-family: "Apercu";
  src: url("../fonts/apercu_regular_pro.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Apercu";
  src: url("../fonts/apercu_regular_italic_pro.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Apercu";
  src: url("../fonts/apercu_medium_pro.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Apercu";
  src: url("../fonts/apercu_medium_italic_pro.otf") format("opentype");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Apercu";
  src: url("../fonts/apercu_bold_pro.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Apercu";
  src: url("../fonts/apercu_bold_italic_pro.otf") format("opentype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Apercu";
  src: url("../fonts/Apercu-Light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Apercu Mono";
  src: url("../fonts/Apercu_Mono.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Foundation colors */
  --raiz:       #2d2c2b;
  --respiro:    #f9f8f3;
  --white:      #ffffff;
  --gray-100:   #f3f2ed;
  --gray-200:   #e8e7e2;
  --gray-300:   #c9c8c3;
  --gray-400:   #8a8985;
  --gray-500:   #6b6a66;

  /* Brand accent palette */
  --equipo:        #3939ff;
  --equipo-edge:   #2d2dcc;
  --equipo-hover:  #2828e6;
  --amancer:       #ffce00;
  --amancer-text:  #8a6d00;
  --chispa:        #f75b41;
  --chispa-hover:  #e04a32;
  --logro:         #069641;
  --sabio:         #8e5aff;
  --calma:         #6fc5ce;
  --calma-text:    #2a7f88;
  --fiesta:        #ff81a9;
  --fiesta-coral:  #f75b41;
  --whatsapp:      #25d366;

  /* Marketing-surface specific */
  --ink:           #03030d;
  --canvas:        #f9f8f3;
  --line:          #d9d9da;
  --night:         #11114c;

  /* Type */
  --font-primary: "Apercu", -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", system-ui, sans-serif;
  --font-mono:    "Apercu Mono", "JetBrains Mono", "SF Mono", "Fira Code", ui-monospace, monospace;

  --fs-body: 14px; --lh-body: 1.6;

  /* Display scale (marketing) */
  --fs-display-1: clamp(2.5rem, 5vw + 1rem, 5.25rem);
  --fs-display-2: clamp(2rem,  3.5vw + 1rem, 3.75rem);
  --fs-display-3: clamp(1.75rem, 2vw + 1rem, 2.5rem);

  /* Spacing (4px grid) */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px;  --sp-6: 24px;  --sp-8: 32px;  --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px;

  /* Radii */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-3xl: 24px;

  /* Shadows */
  --shadow-brutal: 6px 6px 0 var(--raiz);
  --shadow-brutal-amancer: 6px 6px 0 var(--amancer);
  --shadow-brutal-calma:   6px 6px 0 var(--calma);
  --shadow-brutal-sabio:   6px 6px 0 var(--sabio);
  --shadow-brutal-chispa:  6px 6px 0 var(--chispa);

  /* Motion */
  --ease-out:       cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:    cubic-bezier(0.45, 0, 0.55, 1);
  --ease-spring:    cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-marketing: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast:   120ms;
  --duration-normal: 200ms;
  --duration-slow:   350ms;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}