/* ============================================================
   KaosMedia — Colors & Type
   "Controlled chaos." Bold color, halftone collage, raw energy.
   ============================================================ */

/* ---- Type imports -------------------------------------------------
   Body / structure : Montserrat (Google Fonts CDN — official kit face)
   Mono             : Space Mono (CDN)
   Display / impact  : Gilbert — now SELF-HOSTED from the uploaded brand
   files (Gilbert Baker tribute). Gilbert-Bold = solid display face;
   Gilbert-Color = OpenType-SVG/COLR rainbow face for special hero moments.
------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,500;1,700&family=Space+Mono:wght@400;700&display=swap');

@font-face {
  font-family: 'Gilbert';
  src: url('fonts/Gilbert-Bold_Preview5.otf') format('opentype');
  font-weight: 700 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Gilbert Color';
  src: url('fonts/Gilbert-Color_Bold_Preview5.otf') format('opentype');
  font-weight: 700 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ====== PRIMARY PALETTE (Primarios) ====== */
  --kaos-ink:     #092F38; /* deep teal-black — the "house" dark */
  --kaos-yellow:  #FCC72F; /* signature highlighter yellow        */
  --kaos-black:   #010101; /* true black                          */
  --kaos-red:     #FF4134; /* alarm red — primary accent          */

  /* ====== SECONDARY PALETTE (Secundarios) ====== */
  --kaos-pink:    #FC37B8; /* hot magenta */
  --kaos-blue:    #0024A3; /* ultramarine */
  --kaos-green:   #00CF77; /* electric green */

  /* ====== SUPPORT PALETTE (Colores de apoyo) ====== */
  --kaos-purple:  #A42DAF;
  --kaos-cyan:    #00B4E6;

  /* ====== NEUTRALS (derived) ====== */
  --kaos-paper:   #FAFAF7; /* off-white "paper" background        */
  --kaos-bone:    #ECEAE3; /* torn-paper / muted card surface      */
  --kaos-smoke:   #9A9A93; /* halftone grey / muted text          */
  --kaos-line:    #D8D6CE; /* hairline borders on paper           */

  /* ====== SEMANTIC TOKENS ====== */
  --bg:           var(--kaos-paper);
  --bg-invert:    var(--kaos-ink);
  --surface:      #FFFFFF;
  --surface-alt:  var(--kaos-bone);

  --fg1:          var(--kaos-ink);   /* primary text on paper      */
  --fg2:          #3C4A4F;           /* secondary text             */
  --fg3:          var(--kaos-smoke); /* tertiary / captions        */
  --fg-invert:    var(--kaos-paper); /* text on dark               */

  --accent:       var(--kaos-red);
  --accent-2:     var(--kaos-yellow);
  --link:         var(--kaos-red);
  --focus-ring:   var(--kaos-cyan);

  --success:      var(--kaos-green);
  --warning:      var(--kaos-yellow);
  --danger:       var(--kaos-red);
  --info:         var(--kaos-cyan);

  /* ====== TYPE FAMILIES ====== */
  --font-display: 'Gilbert', 'Montserrat', system-ui, sans-serif; /* heavy weights only */
  --font-body:    'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'Space Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* ====== TYPE SCALE (fluid-ish, px) ====== */
  --t-display: 88px;  /* hero statements      */
  --t-h1:      56px;
  --t-h2:      40px;
  --t-h3:      28px;
  --t-h4:      22px;
  --t-body:    17px;
  --t-small:   14px;
  --t-micro:   12px;

  --lh-tight:  0.95;  /* display / headlines  */
  --lh-snug:   1.12;
  --lh-body:   1.55;

  --tracking-display: -0.02em;
  --tracking-caps:    0.14em; /* eyebrow / label uppercase */

  /* ====== RADII ====== */
  --r-none: 0px;     /* default Kaos posture: hard, cut edges */
  --r-sm:   4px;
  --r-md:   8px;
  --r-pill: 999px;

  /* ====== SPACING (8pt 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;

  /* ====== ELEVATION ======
     Kaos shadows are HARD offsets (sticker / cut-paper), not soft blurs. */
  --shadow-hard:   6px 6px 0 var(--kaos-ink);
  --shadow-hard-sm:3px 3px 0 var(--kaos-ink);
  --shadow-soft:   0 8px 28px rgba(9,47,56,.16); /* sparingly — UI surfaces only */
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   ============================================================ */
.kaos-display {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--t-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  color: var(--fg1);
}
h1, .kaos-h1 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--t-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  color: var(--fg1);
}
h2, .kaos-h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--t-h2);
  line-height: var(--lh-snug);
  letter-spacing: -0.01em;
  color: var(--fg1);
}
h3, .kaos-h3 {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: var(--t-h3);
  line-height: var(--lh-snug);
  color: var(--fg1);
}
h4, .kaos-h4 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--t-h4);
  line-height: var(--lh-snug);
  color: var(--fg1);
}
p, .kaos-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--fg2);
  text-wrap: pretty;
}
.kaos-lead {
  font-size: 21px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--fg1);
}
.kaos-eyebrow { /* uppercase label / kicker */
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--t-micro);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--accent);
}
small, .kaos-small { font-size: var(--t-small); color: var(--fg3); }
code, .kaos-mono   { font-family: var(--font-mono); font-size: 0.92em; }

a, .kaos-link { color: var(--link); text-decoration: none; }
a:hover, .kaos-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Highlighter marker — a recurring Kaos device */
.kaos-mark {
  background: linear-gradient(var(--kaos-yellow), var(--kaos-yellow));
  background-size: 100% 42%;
  background-repeat: no-repeat;
  background-position: 0 88%;
  padding: 0 .08em;
}