/* ============================================================
   KOMMERCIO — Colors & Type Foundations
   B2B marketplace for Venezuela.
   PALETTE: Orange is the ONLY brand color. Everything else is
   neutral — white, grays (#F0F0F0, #808080) and charcoal (#1A1A1A).
   No blue. No yellow. Rounded everything.
   ------------------------------------------------------------
   Fonts loaded from Google Fonts (see note at bottom).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700;800&display=swap');

@font-face {
  font-family: 'Arimo';
  src: url('fonts/Arimo-VariableFont_wght.ttf') format('truetype');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- PRIMARY — Naranja Kommercio (the only brand color) ---------- */
  --orange-600: #FF6B00;   /* primary */
  --orange-700: #E25E00;   /* hover */
  --orange-800: #C25000;   /* press / accent text on light */
  --orange-100: #FFEAD9;   /* soft tint surface */
  --orange-050: #FFF5EE;   /* faintest wash */

  /* ---------- NEUTRAL SCALE (brand-given: #FFFFFF, #F0F0F0, #808080) ---------- */
  --white:    #FFFFFF;
  --gray-050: #FAFAFA;
  --gray-100: #F0F0F0;     /* given — light surfaces / panels */
  --gray-200: #E4E4E4;     /* hairline borders */
  --gray-300: #D4D4D4;     /* stronger borders / dividers */
  --gray-400: #A8A8A8;
  --gray-500: #808080;     /* given — secondary text, captions */
  --gray-600: #5C5C5C;
  --gray-700: #3D3D3D;

  /* ---------- DARK ANCHOR — Carbón (#1A1A1A) ---------- */
  --ink-900: #1A1A1A;      /* given — hero / authority backgrounds */
  --ink-800: #242424;      /* dark surface */
  --ink-700: #303030;      /* raised card on dark */
  --ink-600: #4A4A4A;      /* dark border / muted text on dark */

  /* ---------- TEXT ---------- */
  --text-strong:  #1A1A1A; /* headings on light */
  --text-body:    #3D3D3D; /* body on light */
  --text-muted:   #808080; /* secondary / captions on light */
  --text-on-dark: #FFFFFF;
  --text-on-dark-muted: #B3B3B3;

  /* ---------- SURFACES ---------- */
  --bg:           #FFFFFF; /* page background — clean white */
  --bg-elevated:  #FFFFFF; /* cards */
  --bg-soft:      #FAFAFA; /* faint panel */
  --bg-panel:     #F0F0F0; /* gray panel */
  --bg-dark:      #1A1A1A;
  --border-100:   #EAEAEA; /* hairline */
  --border-200:   #D9D9D9; /* stronger */

  /* legacy aliases (kept so older files don't break) */
  --cream:    #FFFFFF;
  --sand-100: #FAFAFA;
  --sand-200: #F0F0F0;

  /* ---------- SEMANTIC TOKENS ---------- */
  --primary:       var(--orange-600);
  --primary-hover: var(--orange-700);
  --on-primary:    #FFFFFF;
  --secondary:     var(--ink-900);   /* secondary actions = charcoal */
  --on-secondary:  #FFFFFF;
  --link:          var(--orange-800);
  --focus-ring:    color-mix(in srgb, var(--orange-600) 45%, transparent);

  /* ---------- TYPE ---------- */
  --font-display: 'Sora', system-ui, sans-serif;           /* brand voice — headlines */
  --font-body:    'Arimo', system-ui, sans-serif;         /* UI + paragraphs (brand-uploaded, self-hosted) */

  --fs-display: clamp(2.75rem, 1.6rem + 5.6vw, 5.5rem);
  --fs-h1:      clamp(2.1rem, 1.4rem + 3.2vw, 3.5rem);
  --fs-h2:      clamp(1.6rem, 1.2rem + 1.9vw, 2.4rem);
  --fs-h3:      clamp(1.25rem, 1.05rem + 0.9vw, 1.6rem);
  --fs-lead:    clamp(1.05rem, 0.98rem + 0.5vw, 1.3rem);
  --fs-body:    1.0625rem;
  --fs-small:   0.875rem;
  --fs-eyebrow: 0.8125rem;

  --lh-tight: 1.02;
  --lh-snug:  1.15;
  --lh-body:  1.6;

  /* ---------- RADII (rounded everything — brand mandate) ---------- */
  --r-xs: 8px; --r-sm: 12px; --r-md: 18px; --r-lg: 24px; --r-xl: 32px;
  --r-pill: 999px;   /* buttons, chips, menu, nav — all pill by default */

  /* ---------- SPACING (4pt base) ---------- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
  --sp-9: 96px; --sp-10: 128px;

  /* ---------- ELEVATION (neutral, soft) ---------- */
  --shadow-sm:  0 1px 2px rgba(26,26,26,.06), 0 2px 6px rgba(26,26,26,.05);
  --shadow-md:  0 4px 12px rgba(26,26,26,.08), 0 12px 28px rgba(26,26,26,.07);
  --shadow-lg:  0 12px 32px rgba(26,26,26,.12), 0 28px 60px rgba(26,26,26,.10);
  --shadow-orange: 0 10px 26px rgba(255,107,0,.28); /* CTA lift */

  --ease: cubic-bezier(.2,.8,.2,1);
  --dur:  .22s;
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   ============================================================ */
.km-h1, .km-display {
  font-family: var(--font-display); font-weight: 800;
  font-size: var(--fs-display); line-height: var(--lh-tight);
  letter-spacing: -0.02em; color: var(--text-strong);
}
.km-h2 {
  font-family: var(--font-display); font-weight: 800;
  font-size: var(--fs-h2); line-height: var(--lh-snug);
  letter-spacing: -0.02em; color: var(--text-strong);
}
.km-h3 {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-h3); line-height: var(--lh-snug);
  letter-spacing: -0.015em; color: var(--text-strong);
}
.km-lead {
  font-family: var(--font-body); font-weight: 400;
  font-size: var(--fs-lead); line-height: 1.45; color: var(--text-body);
}
.km-body {
  font-family: var(--font-body); font-weight: 400;
  font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-body);
}
.km-eyebrow {
  font-family: var(--font-body); font-weight: 700;
  font-size: var(--fs-eyebrow); letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--orange-700);
}

/* ---------- BUTTONS ---------- */
.km-btn {
  font-family: var(--font-body); font-weight: 700; font-size: 1rem;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 26px; border-radius: var(--r-pill);
  border: none; cursor: pointer; text-decoration: none;
  transition: transform var(--dur) var(--ease),
              background var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.km-btn:active { transform: translateY(1px) scale(.99); }
.km-btn--primary { background: var(--primary); color: var(--on-primary); box-shadow: var(--shadow-orange); }
.km-btn--primary:hover { background: var(--primary-hover); transform: translateY(-2px); }
.km-btn--dark { background: var(--ink-900); color: #fff; }
.km-btn--dark:hover { background: var(--ink-700); transform: translateY(-2px); }
.km-btn--light { background: #fff; color: var(--ink-900); }
.km-btn--light:hover { background: var(--gray-100); transform: translateY(-2px); }
.km-btn--ghost { background: transparent; color: var(--text-strong); box-shadow: inset 0 0 0 1.5px var(--border-200); }
.km-btn--ghost:hover { box-shadow: inset 0 0 0 1.5px var(--ink-900); }

/* ---------- CARD ---------- */
.km-card {
  background: var(--bg-elevated); border: 1px solid var(--border-100);
  border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
}

/* ---------- FOCUS ---------- */
.km-focus:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--focus-ring); }

/*
  FONT NOTE — Fonts loaded from Google Fonts CDN above.
  Brand display face: Sora (headlines, CDN) — geométrica y compacta,
    voz B2B profesional. Reemplazó a Beiruti/Elms Sans.
  Body/UI face: Arimo (uploaded by the brand — self-hosted from /fonts).
  To ship offline, also self-host Sora (.woff2) and swap its @import.
*/