/* ===========================================================
   Asociativo — Design Tokens
   Colors, typography, radii, shadows, spacing.
   Import this in any HTML artifact that needs the brand.
   =========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700;800&family=Lato:wght@300;400;700;900&family=JetBrains+Mono:wght@400;700&display=swap');

:root {
  /* ---------- Brand primaries ---------- */
  --aso-yellow:       #EAF501;   /* electric chartreuse, the SIGNATURE hue */
  --aso-yellow-600:   #D4DE01;   /* slightly darker for hover on yellow bg */
  --aso-yellow-300:   #F4F97A;
  --aso-yellow-100:   #FBFDDA;

  --aso-purple:       #6D37FF;   /* electric violet, the co-lead */
  --aso-purple-700:   #5928D6;
  --aso-purple-800:   #4419B0;
  --aso-purple-300:   #B199FF;
  --aso-purple-100:   #E6DDFF;

  /* ---------- Neutrals ---------- */
  --aso-black:        #000000;
  --aso-ink:          #0A0A0B;   /* near-black, used for body text */
  --aso-gray-900:     #1A1A1C;
  --aso-gray-700:     #3C3D41;
  --aso-gray-500:     #7A7B80;
  --aso-gray-300:     #C5C6CB;
  --aso-gray-200:     #E2E3E6;
  --aso-gray-100:     #F2F2F4;
  --aso-gray-50:      #F9F9FA;
  --aso-white:        #FFFFFF;

  /* ---------- Semantic surfaces ---------- */
  --aso-bg:           var(--aso-white);
  --aso-bg-alt:       var(--aso-gray-50);
  --aso-bg-invert:    var(--aso-ink);
  --aso-bg-accent:    var(--aso-yellow);
  --aso-bg-brand:     var(--aso-purple);

  /* ---------- Semantic text ---------- */
  --aso-fg:           var(--aso-ink);
  --aso-fg-muted:     var(--aso-gray-700);
  --aso-fg-subtle:    var(--aso-gray-500);
  --aso-fg-invert:    var(--aso-white);
  --aso-fg-brand:     var(--aso-purple);
  --aso-fg-accent:    var(--aso-yellow);

  /* ---------- Borders & lines ---------- */
  --aso-border:       var(--aso-gray-200);
  --aso-border-strong: var(--aso-gray-700);
  --aso-border-brand: var(--aso-purple);

  /* ---------- Type families ---------- */
  /* Sora — display & body sans. The deck uses Sora Bold for headlines,
     Sora Light/Regular for large type, Lato for running copy.
     Lato is kept here as the utility body for long paragraphs; Sora is
     preferred for anything that should feel like the brand.            */
  --aso-font-display: 'Sora', 'Inter', ui-sans-serif, system-ui, sans-serif;
  --aso-font-body:    'Lato', 'Sora', ui-sans-serif, system-ui, sans-serif;
  --aso-font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* ---------- Type scale (fluid-ish, px) ---------- */
  --aso-text-xs:   12px;
  --aso-text-sm:   14px;
  --aso-text-base: 16px;
  --aso-text-md:   18px;
  --aso-text-lg:   22px;
  --aso-text-xl:   28px;
  --aso-text-2xl:  36px;
  --aso-text-3xl:  48px;
  --aso-text-4xl:  64px;
  --aso-text-5xl:  84px;
  --aso-text-6xl:  112px;

  --aso-leading-tight:  1.05;
  --aso-leading-snug:   1.15;
  --aso-leading-normal: 1.45;
  --aso-leading-loose:  1.6;

  --aso-track-tight:  -0.02em;
  --aso-track-snug:   -0.01em;
  --aso-track-normal: 0; /* @kind other */
  --aso-track-wide:   0.04em;
  --aso-track-caps:   0.08em;

  /* ---------- Spacing (4-pt grid) ---------- */
  --aso-space-0:   0px;
  --aso-space-1:   4px;
  --aso-space-2:   8px;
  --aso-space-3:   12px;
  --aso-space-4:   16px;
  --aso-space-5:   24px;
  --aso-space-6:   32px;
  --aso-space-8:   48px;
  --aso-space-10:  64px;
  --aso-space-12:  96px;
  --aso-space-16:  128px;

  /* ---------- Radii ---------- */
  /* The brand is mostly flat/squared. We use minimal rounding, sized
     mainly for pills and soft cards. Hard edges are the default.       */
  --aso-radius-0:   0px;
  --aso-radius-1:   2px;
  --aso-radius-2:   4px;
  --aso-radius-3:   8px;
  --aso-radius-pill: 999px;

  /* ---------- Shadows ---------- */
  /* Asociativo is a flat, editorial system. Shadows are rare and
     always soft. Use borders and color for hierarchy instead.          */
  --aso-shadow-1:  0 1px 2px rgba(10,10,11,0.06);
  --aso-shadow-2:  0 4px 14px rgba(10,10,11,0.08);
  --aso-shadow-3:  0 18px 42px rgba(10,10,11,0.12);
  --aso-shadow-focus: 0 0 0 3px rgba(109,55,255,0.35);

  /* ---------- Motion ---------- */
  --aso-ease:        cubic-bezier(.2,.7,.2,1); /* @kind other */
  --aso-ease-snappy: cubic-bezier(.3,1,.3,1); /* @kind other */
  --aso-dur-fast:    120ms; /* @kind other */
  --aso-dur:         220ms; /* @kind other */
  --aso-dur-slow:    420ms; /* @kind other */

  /* ---------- Layout ---------- */
  --aso-container:  1280px;
  --aso-gutter:     24px;
}

/* ===========================================================
   Semantic element defaults — use these to get branded type
   without memorising the scale.
   =========================================================== */

.aso-h1, h1.aso {
  font-family: var(--aso-font-display);
  font-weight: 700;
  font-size: clamp(40px, 6vw, var(--aso-text-5xl));
  line-height: var(--aso-leading-tight);
  letter-spacing: var(--aso-track-tight);
  color: var(--aso-fg);
  text-wrap: balance;
}
.aso-h2, h2.aso {
  font-family: var(--aso-font-display);
  font-weight: 700;
  font-size: clamp(28px, 4vw, var(--aso-text-3xl));
  line-height: var(--aso-leading-snug);
  letter-spacing: var(--aso-track-snug);
  color: var(--aso-fg);
}
.aso-h3, h3.aso {
  font-family: var(--aso-font-display);
  font-weight: 600;
  font-size: var(--aso-text-xl);
  line-height: var(--aso-leading-snug);
  color: var(--aso-fg);
}
.aso-eyebrow {
  font-family: var(--aso-font-mono);
  font-weight: 400;
  font-size: var(--aso-text-xs);
  text-transform: lowercase;
  letter-spacing: var(--aso-track-caps);
  color: var(--aso-fg-brand);
}
.aso-p, p.aso {
  font-family: var(--aso-font-body);
  font-weight: 400;
  font-size: var(--aso-text-base);
  line-height: var(--aso-leading-loose);
  color: var(--aso-fg);
  text-wrap: pretty;
}
.aso-lede {
  font-family: var(--aso-font-display);
  font-weight: 300;
  font-size: var(--aso-text-xl);
  line-height: var(--aso-leading-normal);
  color: var(--aso-fg);
  text-wrap: pretty;
}
.aso-small {
  font-family: var(--aso-font-body);
  font-size: var(--aso-text-sm);
  color: var(--aso-fg-muted);
}
.aso-mono {
  font-family: var(--aso-font-mono);
  font-size: var(--aso-text-sm);
  letter-spacing: var(--aso-track-normal);
}
.aso-code {
  font-family: var(--aso-font-mono);
  font-size: 0.9em;
  background: var(--aso-gray-100);
  padding: 0.1em 0.35em;
  border-radius: var(--aso-radius-2);
}

/* The signature Asociativo text-highlight — a filled rectangle around
   a run of text, either yellow-on-purple or purple-on-yellow. Use it
   SPARINGLY — 2–4 highlighted chunks per hero headline, max.          */
.aso-mark {
  background: var(--aso-purple);
  color: var(--aso-yellow);
  padding: 0.02em 0.18em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.aso-mark--invert {
  background: var(--aso-yellow);
  color: var(--aso-purple);
}
.aso-mark--black {
  background: var(--aso-ink);
  color: var(--aso-yellow);
}