/* ============================================================
   Arbitrade Design System — Colors & Type Foundations
   Brand: Arbitrade (retail desatendido B2B/B2C)
   ============================================================ */

/* ---- Fonts ---- */
@font-face {
  font-family: "Fraunces";
  src: url("/identidad/beta-2026-assets/fonts/Fraunces-Variable.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("/identidad/beta-2026-assets/fonts/DMSans-Variable.ttf") format("truetype-variations");
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ============== FONT FAMILIES ============== */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body:    "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ============== PRIMARY — NARANJA ARBITRADE (V3 mayo 2026) ============== */
  --orange-50:  #FFF6EE;
  --orange-100: #FFE9D4;   /* PDF V3 */
  --orange-200: #FFCFA8;
  --orange-300: #FFA770;   /* PDF V3 */
  --orange-400: #FF8244;
  --orange-500: #FF5F15;   /* PDF V3 · Primary brand · Pantone 172 C */
  --orange-600: #E04610;
  --orange-700: #C72D07;   /* PDF V3 */
  --orange-800: #951F03;
  --orange-900: #6B1602;
  --orange-950: #3D0B02;

  --orange-accent: #FFA770; /* Alias del nuevo 300 (cálido, highlight) */

  /* ============== NEUTRALES — cremas (V3) y marrones ============== */
  /* Beige V3: más amarillento/tostado que la versión anterior */
  --cream-50:  #FAF7F1;   /* derivado claro */
  --cream-100: #F4F0EA;   /* PDF V3 Beige 50 · Background base */
  --cream-200: #EFE2DC;   /* PDF V3 Beige 100 · Surface */
  --cream-300: #D49E98;   /* PDF V3 Beige 300 · borders/acentos cream-rosa */
  --cream-400: #BC8275;
  --cream-500: #9C685B;
  --cream-600: #8E6B5F;
  --cream-700: #6A4A40;
  --cream-800: #221011;   /* PDF V3 Dark 800 */
  --cream-900: #38191A;   /* Mantenido por legibilidad — texto principal */
  --cream-950: #160708;

  /* ============== CAFÉ — marrón (categoría café · V3) ============== */
  --coffee-50:  #F8F2EF;
  --coffee-100: #EDE0D8;
  --coffee-200: #D6B9A8;
  --coffee-300: #BC8E76;
  --coffee-400: #9A6B55;
  --coffee-500: #914444;   /* PDF V3 default */
  --coffee-600: #7B3A3B;
  --coffee-700: #673437;   /* PDF V3 */
  --coffee-800: #481E1F;
  --coffee-900: #2A0E0F;
  --coffee-950: #140B07;

  /* ============== SALUDABLE — verde (V3 · vibrante) ============== */
  --green-50:  #F4FBEA;
  --green-100: #E6F6D1;   /* PDF V3 */
  --green-200: #C8E89F;
  --green-300: #A2D36A;   /* PDF V3 */
  --green-400: #80BA45;
  --green-500: #6DA92F;
  --green-600: #60A022;   /* PDF V3 default */
  --green-700: #314C1B;   /* PDF V3 */
  --green-800: #243818;
  --green-900: #162710;
  --green-950: #0B1708;

  /* ============== REFRESCANTE — azul (V3 · más vivo) ============== */
  --blue-50:  #ECF6FF;
  --blue-100: #D7EEFF;   /* PDF V3 */
  --blue-200: #B5DDFF;
  --blue-300: #83CFFF;   /* PDF V3 */
  --blue-400: #4BB0FF;
  --blue-500: #0676FF;   /* PDF V3 default */
  --blue-600: #0A5BC8;
  --blue-700: #134695;   /* PDF V3 */
  --blue-800: #0F3470;
  --blue-900: #0B244E;
  --blue-950: #06101B;

  /* ============== VITALIDAD — amarillo (V3) ============== */
  --yellow-50:  #FAFAC8;   /* PDF V3 */
  --yellow-100: #F8F498;
  --yellow-200: #F4ED72;
  --yellow-300: #F0E959;   /* PDF V3 */
  --yellow-400: #E5D62E;
  --yellow-500: #DDCA19;   /* PDF V3 default */
  --yellow-600: #B59B12;
  --yellow-700: #8F7411;   /* PDF V3 */
  --yellow-800: #765C15;
  --yellow-900: #3A2401;
  --yellow-950: #201401;

  /* ============== VITALIDAD — rosa (V3) ============== */
  --pink-50:  #FCF3F9;
  --pink-100: #FAE9F4;   /* PDF V3 */
  --pink-200: #FBD7EE;
  --pink-300: #F9C2E9;   /* PDF V3 */
  --pink-400: #EE94CB;
  --pink-500: #DD66AD;   /* PDF V3 default */
  --pink-600: #C04590;
  --pink-700: #8F255B;   /* PDF V3 */
  --pink-800: #6E1A45;
  --pink-900: #4D1130;
  --pink-950: #2C081C;

  /* ============== (ROJO GRANATE eliminado — no pertenece a la identidad) ============== */

  /* ============== SEMANTIC — surface / fg / border ============== */
  --bg:         var(--cream-100);
  --bg-raised: #FFFFFF;
  --bg-sunken: var(--cream-200);
  --bg-inverse: var(--cream-900);

  --fg-1: var(--cream-900);        /* primary text */
  --fg-2: var(--cream-800);        /* body */
  --fg-3: var(--cream-700);        /* secondary */
  --fg-4: var(--cream-600);        /* tertiary / meta */
  --fg-muted: var(--cream-500);    /* placeholders */
  --fg-on-brand: #FFFFFF;
  --fg-inverse:  var(--cream-100);

  --border-subtle:   var(--cream-200);
  --border-default:  var(--cream-300);
  --border-strong:   var(--cream-400);
  --border-inverse:  var(--cream-800);

  --brand:        var(--orange-500);
  --brand-hover:  var(--orange-600);
  --brand-press:  var(--orange-700);
  --brand-soft:   var(--orange-50);

  /* Category semantic aliases — hex values from brand guidelines (V3) */
  --cat-brand:       #FF5F15;  /* Marca · PDF V3 */
  --cat-coffee:      #914444;  /* Café · PDF V3 */
  --cat-energy:      #DDCA19;  /* Energía · PDF V3 */
  --cat-healthy:     #60A022;  /* Saludable · PDF V3 */
  --cat-refreshing:  #0676FF;  /* Refrescante · PDF V3 */
  --cat-vitality:    #DD66AD;  /* Vitalidad · PDF V3 */

  /* ============== GRADIENTS — herramienta visual propia ============== */
  /* Principal — 6 puntos de color para efecto líquido; 3 de ellos son el
     naranja de marca (--orange-500). El yellow y el pink se empujan fuera
     de los márgenes para un rebote orgánico más natural. */
  --gradient-brand:
    radial-gradient(55% 60% at 22% 28%, var(--orange-500) 0%, transparent 62%),
    radial-gradient(50% 55% at 78% 32%, var(--orange-500) 0%, transparent 60%),
    radial-gradient(60% 60% at 50% 80%, var(--orange-500) 0%, transparent 65%),
    radial-gradient(55% 60% at -8% 110%, var(--yellow-400) 0%, transparent 62%),
    radial-gradient(55% 60% at 108% 105%, var(--pink-400) 0%, transparent 62%),
    radial-gradient(60% 60% at 50% -10%, var(--orange-300) 0%, transparent 65%),
    var(--orange-400);

  /* Categoría gradients — 6 puntos líquidos, base vibrante (saturados),
     dominados por el color pleno de categoría (500/600). */
  --gradient-orange-soft:
    radial-gradient(55% 60% at 20% 25%, var(--orange-500) 0%, transparent 60%),
    radial-gradient(50% 55% at 80% 30%, var(--orange-accent) 0%, transparent 60%),
    radial-gradient(60% 60% at 50% 88%, var(--orange-300) 0%, transparent 65%),
    radial-gradient(45% 50% at 15% 82%, var(--yellow-400) 0%, transparent 60%),
    radial-gradient(40% 45% at 85% 70%, var(--pink-400) 0%, transparent 60%),
    radial-gradient(60% 60% at 50% 10%, var(--orange-400) 0%, transparent 65%),
    var(--orange-500);

  --gradient-coffee:
    radial-gradient(55% 60% at 18% 22%, var(--coffee-500) 0%, transparent 62%),
    radial-gradient(48% 55% at 82% 28%, var(--coffee-700) 0%, transparent 60%),
    radial-gradient(60% 60% at 50% 85%, var(--coffee-900) 0%, transparent 65%),
    radial-gradient(45% 50% at 15% 80%, var(--orange-600) 0%, transparent 60%),
    radial-gradient(40% 45% at 85% 75%, var(--coffee-500) 0%, transparent 60%),
    radial-gradient(60% 60% at 50% 10%, var(--coffee-600) 0%, transparent 65%),
    var(--coffee-500);

  --gradient-healthy:
    radial-gradient(55% 60% at 18% 22%, var(--green-600) 0%, transparent 62%),
    radial-gradient(48% 55% at 82% 28%, var(--green-600) 0%, transparent 60%),
    radial-gradient(60% 60% at 50% 85%, var(--green-500) 0%, transparent 65%),
    radial-gradient(45% 50% at 15% 80%, var(--yellow-400) 0%, transparent 60%),
    radial-gradient(40% 45% at 85% 75%, var(--green-400) 0%, transparent 60%),
    radial-gradient(60% 60% at 50% 10%, var(--green-700) 0%, transparent 65%),
    var(--green-600);

  --gradient-refreshing:
    radial-gradient(55% 60% at 18% 22%, var(--blue-500) 0%, transparent 62%),
    radial-gradient(48% 55% at 82% 28%, var(--blue-600) 0%, transparent 60%),
    radial-gradient(60% 60% at 50% 85%, var(--blue-500) 0%, transparent 65%),
    radial-gradient(45% 50% at 15% 80%, var(--blue-400) 0%, transparent 60%),
    radial-gradient(40% 45% at 85% 75%, var(--blue-700) 0%, transparent 60%),
    radial-gradient(60% 60% at 50% 10%, var(--blue-500) 0%, transparent 65%),
    var(--blue-500);

  --gradient-vitality:
    radial-gradient(55% 60% at 18% 22%, var(--pink-500) 0%, transparent 62%),
    radial-gradient(48% 55% at 82% 28%, var(--pink-600) 0%, transparent 60%),
    radial-gradient(60% 60% at 50% 85%, var(--pink-500) 0%, transparent 65%),
    radial-gradient(45% 50% at 15% 80%, var(--orange-500) 0%, transparent 60%),
    radial-gradient(40% 45% at 85% 75%, var(--pink-700) 0%, transparent 60%),
    radial-gradient(60% 60% at 50% 10%, var(--pink-400) 0%, transparent 65%),
    var(--pink-500);

  --gradient-warm-cream:
    radial-gradient(55% 60% at 18% 22%, var(--orange-400) 0%, transparent 62%),
    radial-gradient(48% 55% at 82% 28%, var(--yellow-400) 0%, transparent 60%),
    radial-gradient(60% 60% at 50% 85%, var(--pink-300) 0%, transparent 65%),
    radial-gradient(45% 50% at 15% 80%, var(--orange-300) 0%, transparent 60%),
    radial-gradient(40% 45% at 85% 75%, var(--orange-accent) 0%, transparent 60%),
    radial-gradient(60% 60% at 50% 10%, var(--orange-500) 0%, transparent 65%),
    var(--orange-300);

  /* ============== SHADOWS — soft, warm-tinted ============== */
  --shadow-xs: 0 1px 2px rgba(56, 25, 26, 0.05);
  --shadow-sm: 0 2px 6px rgba(56, 25, 26, 0.06), 0 1px 2px rgba(56, 25, 26, 0.04);
  --shadow-md: 0 8px 20px -6px rgba(56, 25, 26, 0.09), 0 2px 6px rgba(56, 25, 26, 0.05);
  --shadow-lg: 0 20px 40px -10px rgba(56, 25, 26, 0.14), 0 6px 14px rgba(56, 25, 26, 0.06);
  --shadow-xl: 0 36px 80px -20px rgba(56, 25, 26, 0.22), 0 12px 28px rgba(56, 25, 26, 0.08);
  --shadow-brand: 0 16px 36px -12px rgba(255, 95, 21, 0.35);  /* tinte del nuevo --orange-500 */

  /* ============== RADII — generous, calming ============== */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-2xl: 44px;
  --radius-pill: 999px;

  /* ============== SPACING (4px base) ============== */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* ============== MOTION ============== */
  --ease-standard: cubic-bezier(0.32, 0.72, 0.28, 1);
  --ease-out-soft: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-soft:  cubic-bezier(0.55, 0.055, 0.675, 0.19);
  --dur-fast: 140ms;
  --dur-base: 240ms;
  --dur-slow: 420ms;

  /* ============== TYPE SCALE ============== */
  /* Display (Fraunces) uses optical sizing — quieter at small sizes, punchy at large */
  --fs-display-xl: clamp(56px, 8vw, 112px);
  --fs-display-lg: clamp(44px, 6vw, 80px);
  --fs-display-md: clamp(36px, 4.5vw, 60px);
  --fs-display-sm: clamp(28px, 3.2vw, 44px);

  --fs-heading-xl: 40px;
  --fs-heading-lg: 32px;
  --fs-heading-md: 24px;
  --fs-heading-sm: 20px;
  --fs-heading-xs: 18px;

  --fs-body-lg: 18px;
  --fs-body-md: 16px;
  --fs-body-sm: 14px;
  --fs-caption: 12px;
  --fs-micro:   11px;

  /* Line heights */
  --lh-display: 1.02;
  --lh-heading: 1.15;
  --lh-body:    1.5;
  --lh-tight:   1.25;

  /* Letter spacing */
  --tracking-display: -0.02em;
  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.08em;   /* uppercase labels */
  --tracking-wider: 0.14em;  /* eyebrow / mini-caps */
}

/* ============================================================
   Element defaults — use these as-is
   ============================================================ */

html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: var(--fs-body-md);
  line-height: var(--lh-body);
  font-feature-settings: "ss01", "cv11";
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: 400;                    /* Fraunces reads best at 350–500 */
  font-variation-settings: "opsz" 144, "SOFT" 30, "WONK" 0;
  font-size: var(--fs-display-lg);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  color: var(--fg-1);
  margin: 0 0 var(--space-6);
}

h2, .h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-variation-settings: "opsz" 96, "SOFT" 50, "WONK" 0;
  font-size: var(--fs-display-sm);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  margin: 0 0 var(--space-4);
}

h3, .h3 {
  font-family: var(--font-display);
  font-weight: 450;
  font-variation-settings: "opsz" 48, "SOFT" 50, "WONK" 0;
  font-size: var(--fs-heading-lg);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--space-3);
}

h4, .h4 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-heading-md);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--space-2);
}

h5, .h5 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-heading-sm);
  line-height: var(--lh-tight);
  margin: 0 0 var(--space-2);
}

p, .p {
  font-family: var(--font-body);
  font-size: var(--fs-body-md);
  line-height: var(--lh-body);
  color: var(--fg-2);
  text-wrap: pretty;
  margin: 0 0 var(--space-4);
}

.eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-caption);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--fg-4);
}

.lede {
  font-family: var(--font-body);
  font-size: var(--fs-body-lg);
  line-height: 1.45;
  color: var(--fg-2);
  font-weight: 400;
}

code, .code, kbd {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--cream-200);
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  color: var(--cream-900);
}

a { color: var(--brand); text-decoration: none; transition: color var(--dur-fast) var(--ease-standard); }
a:hover { color: var(--brand-hover); }

::selection { background: var(--orange-200); color: var(--cream-900); }