/* ============================================================
   ON AIR CHALLENGE — COLORS & TYPE
   Colombia Fintech / Creator Challenge
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Archivo+Black&family=Archivo:wght@400;500;600;700;800;900&family=Handjet:wght@400;500;700;800;900&family=DM+Sans:wght@400;500;700&display=swap");

:root {
  /* ---------- BRAND COLORS ---------- */
  /* Primary backgrounds — full-bleed flats */
  --oac-yellow:       #F9D63A;   /* "lemon" — main brand bg */
  --oac-yellow-soft:  #FFE96B;   /* lighter halftone tier */
  --oac-orange:       #FFA722;   /* "amber" — alt brand bg */
  --oac-orange-soft:  #FFC25C;   /* halftone overlay */
  --oac-purple:       #7C4FE7;   /* electric purple */
  --oac-purple-soft:  #9B74F0;   /* halftone overlay */
  --oac-green:        #1FBA5F;   /* arcade green */
  --oac-green-soft:   #46CF7E;   /* halftone overlay */

  /* Ink + paper */
  --oac-ink:          #0D0D0D;   /* near-black, used for borders + type */
  --oac-ink-soft:     #1A1A1A;
  --oac-paper:        #FFFFFF;
  --oac-paper-warm:   #FFF8E5;   /* off-white card on yellow */

  /* Colombia Fintech corporate (parent brand) */
  --cf-navy:          #2A2E3F;   /* logo grey-navy */
  --cf-navy-ink:      #1B1E2A;

  /* Semantic surfaces */
  --bg-primary:       var(--oac-yellow);
  --bg-alt:           var(--oac-orange);
  --bg-creator:       var(--oac-purple);
  --bg-creator-alt:   var(--oac-green);
  --fg-default:       var(--oac-ink);
  --fg-onDark:        var(--oac-paper);
  --card-bg:          var(--oac-paper);
  --card-border:      var(--oac-ink);

  /* ---------- SHADOWS ---------- */
  /* The brand uses HARD offset shadows — no blur. */
  --shadow-hard-sm:   3px 3px 0 0 var(--oac-ink);
  --shadow-hard-md:   6px 6px 0 0 var(--oac-ink);
  --shadow-hard-lg:   10px 10px 0 0 var(--oac-ink);
  --shadow-hard-xl:   16px 16px 0 0 var(--oac-ink);
  /* Ambient (rare — only for app UI) */
  --shadow-soft:      0 4px 12px rgba(13,13,13,.08);

  /* ---------- BORDERS ---------- */
  --border-thin:      2px solid var(--oac-ink);
  --border-default:   3px solid var(--oac-ink);
  --border-bold:      4px solid var(--oac-ink);

  /* ---------- RADII ---------- */
  --radius-pill:      999px;     /* tags, agenda chips, capsule labels */
  --radius-card:      18px;      /* main agenda cards */
  --radius-card-lg:   28px;
  --radius-card-sm:   12px;
  --radius-tile:      4px;       /* pixel-feel tiles */
  --radius-none:      0px;       /* hard rectangles for headlines */

  /* ---------- SPACING ---------- */
  --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;

  /* ---------- TYPOGRAPHY: FAMILIES ---------- */
  /* Display — condensed/blocky extrabold for headline rectangles */
  --font-display:     "Archivo Black", "Archivo", "Neue Machina", system-ui, sans-serif;
  /* Pixel — used for the brand wordmark + creator names */
  --font-pixel:       "Handjet", "VT323", "Press Start 2P", monospace;
  /* Body — clean geometric sans */
  --font-body:        "DM Sans", "Aeonik", "Satoshi", system-ui, sans-serif;
  --font-mono:        "DM Mono", "JetBrains Mono", ui-monospace, monospace;

  /* ---------- TYPE SCALE ---------- */
  --fs-display-xl:    96px;   /* hero, billboard */
  --fs-display-lg:    72px;
  --fs-display:       56px;   /* slide headlines */
  --fs-h1:            44px;
  --fs-h2:            32px;   /* agenda card titles */
  --fs-h3:            24px;
  --fs-body-lg:       18px;
  --fs-body:          16px;
  --fs-body-sm:       14px;
  --fs-caption:       12px;
  --fs-pixel:         28px;   /* pixel wordmark default */

  /* ---------- LINE HEIGHTS ---------- */
  --lh-tight:         1.0;
  --lh-headline:      1.05;
  --lh-snug:          1.2;
  --lh-body:          1.5;

  /* ---------- LETTER SPACING ---------- */
  --tracking-display: 0.01em;
  --tracking-pixel:   0.04em;
  --tracking-caption: 0.06em;
}

/* ---------- BASE / ELEMENT STYLES ---------- */
html, body {
  font-family: var(--font-body);
  color: var(--fg-default);
  background: var(--bg-primary);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--fs-h1);
  line-height: var(--lh-headline);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  margin: 0;
}

h2, .h2 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  margin: 0;
}

h3, .h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  margin: 0;
}

.display, .display-xl, .display-lg {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
}
.display-xl { font-size: var(--fs-display-xl); }
.display-lg { font-size: var(--fs-display-lg); }
.display    { font-size: var(--fs-display); }

.pixel-mark {
  font-family: var(--font-pixel);
  font-weight: 700;
  letter-spacing: var(--tracking-pixel);
  text-transform: uppercase;
}

p, .body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-default);
  margin: 0;
}

.caption {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-caption);
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
}

code, .mono {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

/* ---------- PATTERNS / TEXTURES ----------
   Halftone dot pattern is a brand signature. Use as a corner
   accent or vertical fade. CSS-only fallback below; the real
   asset is at /assets/halftone-pattern.png. */
.halftone-dots {
  background-image: radial-gradient(
    circle at center,
    currentColor 1.5px,
    transparent 1.6px
  );
  background-size: 12px 12px;
  background-repeat: repeat;
}

/* ---------- HEADLINE RECTANGLE ----------
   The signature "boxed phrase" from the slide deck:
   white card with hard black border and offset shadow,
   large display type. Rectangles are stacked, not rounded. */
.headline-rect {
  display: inline-block;
  padding: 14px 28px;
  background: var(--oac-paper);
  border: var(--border-default);
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  font-size: var(--fs-display);
  letter-spacing: var(--tracking-display);
  color: var(--oac-ink);
}