/* ============================================================
   Academia Lendár[IA] — Foundations
   Single source of truth for colour, type, spacing, motion.
   ============================================================ */

/* -- Fonts (Google Fonts substitutions; see README for licensing) -- */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800&family=Archivo+Black&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  /* ---------- COLOUR — Brand ---------- */
  --color-yellow:        #F6C324;   /* Amarelo Lendário — the spark / torch flame */
  --color-yellow-deep:   #E0AE15;   /* hover / press of yellow surfaces           */
  --color-ink:           #191919;   /* Preto — true text + structural black       */
  --color-ink-soft:      #2A2A2A;   /* dark card surfaces                         */
  --color-ink-rule:      #3A3A3A;   /* low-contrast rule on ink surfaces          */

  /* ---------- COLOUR — Neutrals ---------- */
  --color-paper:         #FFFFF0;   /* default light surface — ivory white  */
  --color-paper-warm:    #F2EBDA;   /* bege — editorial sand, editorial bg */
  --color-paper-deep:    #E8DEC6;   /* deeper bege for borders / contrasts */
  --color-rule:          #D8CDB1;   /* hairline rule on bege               */
  --color-rule-cool:     #E7E2D2;   /* hairline rule on paper              */
  --color-mute:          #4F4A42;   /* secondary text */
  --color-mute-soft:     #9B9B9B;   /* tertiary text  */
  --color-on-ink:        #D4D4D4;   /* readable body copy on ink panels           */
  --color-on-ink-soft:   #C4C4C4;   /* secondary copy on ink panels               */
  --color-on-ink-dim:    var(--color-mute-soft);   /* tertiary labels on ink panels              */

  /* ---------- COLOUR — Signals (UI ONLY — never on marketing) ---------- */
  --color-signal-red:    #A51F2B;   /* destructive / error */
  --color-signal-green:  #166C3F;   /* success — rare      */
  --color-signal-green-soft: color-mix(in srgb, var(--color-signal-green) 48%, var(--color-paper) 52%);
  --color-signal-red-soft:   color-mix(in srgb, var(--color-signal-red) 36%, var(--color-paper) 64%);

  /* ---------- COLOUR — Semantic ---------- */
  --bg-default:          var(--color-paper);
  --bg-warm:             var(--color-paper-warm);
  --bg-inverse:          var(--color-ink);
  --bg-brand:            var(--color-yellow);

  --fg-default:          var(--color-ink);
  --fg-inverse:          var(--color-paper);
  --fg-mute:             var(--color-mute);
  --fg-on-brand:         var(--color-ink);   /* yellow surfaces ALWAYS use black ink */

  --border-default:      var(--color-ink);
  --border-rule:         var(--color-rule-cool);

  /* ---------- TYPE — Families ---------- */
  --font-display:        "Archivo Black", "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-sans:           "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono:           "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ---------- TYPE — Scale (base 16) ---------- */
  --text-xs:    12px;     /* mono captions, metadata          */
  --text-sm:    14px;
  --text-base:  16px;     /* body                              */
  --text-lg:    18px;
  --text-xl:    20px;     /* sub-hero copy                     */
  --text-2xl:   24px;
  --text-3xl:   32px;
  --text-4xl:   48px;
  --text-5xl:   64px;     /* display floor                     */
  --text-6xl:   84px;
  --text-7xl:   112px;    /* hero ceiling                      */
  --text-mega:  140px;    /* page-defining mega type           */

  /* ---------- TYPE — Line height ---------- */
  --lh-tight:   0.92;     /* display                           */
  --lh-snug:    1.05;
  --lh-normal:  1.25;
  --lh-body:    1.5;
  --lh-loose:   1.7;

  /* ---------- TYPE — Tracking ---------- */
  --track-tight:     0;        /* display headlines */
  --track-snug:      0;
  --track-normal:    0;
  --track-loose:     0.04em;   /* mono / all-caps labels */
  --track-wide:      0.08em;

  /* ---------- SPACING — 8-px base grid ---------- */
  --space-1:    4px;
  --space-2:    8px;
  --space-3:    12px;
  --space-4:    16px;
  --space-5:    24px;
  --space-6:    32px;
  --space-7:    48px;
  --space-8:    64px;
  --space-9:    96px;
  --space-10:   128px;
  --space-11:   192px;

  /* ---------- LAYOUT ---------- */
  --container:        1320px;
  --gutter-desktop:   24px;
  --gutter-mobile:    16px;
  --nav-height:       56px;

  /* ---------- RADIUS — almost always 0 ---------- */
  --radius-0:    0;
  --radius-full: 0;          /* there are no circles in this system */

  /* ---------- BORDER ---------- */
  --border-w-hairline:  1px;
  --border-w-default:   2px;
  --border-w-thick:     3px;

  /* ---------- SHADOW — printer's block only ---------- */
  --shadow-block-sm:  4px 4px 0 var(--color-ink);
  --shadow-block:     8px 8px 0 var(--color-ink);
  --shadow-block-lg:  12px 12px 0 var(--color-ink);
  --shadow-block-yellow: 8px 8px 0 var(--color-yellow);

  /* ---------- MOTION ---------- */
  --duration-fast:   100ms;
  --duration-base:   200ms;
  --duration-slow:   400ms;
  --ease-mech:       linear;
  --ease-out:        cubic-bezier(0.2, 0, 0, 1);
}

/* ============================================================
   Semantic type styles — apply via class on the element
   ============================================================ */

.t-mega {
  font-family: var(--font-display);
  font-size: clamp(72px, 10vw, var(--text-mega));
  line-height: var(--lh-tight);
  letter-spacing: var(--track-tight);
  text-transform: uppercase;
  margin: 0;
}

.t-display {
  font-family: var(--font-display);
  font-size: clamp(48px, 7vw, var(--text-6xl));
  line-height: var(--lh-tight);
  letter-spacing: var(--track-tight);
  text-transform: uppercase;
  margin: 0;
}

.t-h1 {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-tight);
  text-transform: uppercase;
  margin: 0;
}

.t-h2 {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: var(--text-4xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--track-snug);
  margin: 0;
}

.t-h3 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--text-2xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--track-snug);
  margin: 0;
}

.t-eyebrow {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--text-xs);
  line-height: 1.2;
  letter-spacing: var(--track-loose);
  text-transform: uppercase;
  margin: 0;
}

.t-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--text-base);
  line-height: var(--lh-body);
  margin: 0;
}

.t-body-lg {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--text-xl);
  line-height: var(--lh-body);
  margin: 0;
}

.t-meta {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--text-xs);
  line-height: 1.3;
  letter-spacing: var(--track-loose);
  color: var(--fg-mute);
  margin: 0;
}

.t-tag {
  /* the bracketed label — [MÓDULO 03] style */
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--text-xs);
  line-height: 1;
  letter-spacing: var(--track-loose);
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 0;
}
.t-tag::before { content: "["; }
.t-tag::after  { content: "]"; }

/* ============================================================
   Element defaults
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-default);
  color: var(--fg-default);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--color-yellow);
  color: var(--color-ink);
}

/* Sane element resets so .t-* classes are the source of truth */
h1, h2, h3, h4, h5, h6, p { margin: 0; }
button { font-family: inherit; }
a,
a:hover,
a:focus-visible,
a:active,
button,
button:hover,
button:focus-visible,
summary,
summary:hover,
summary:focus-visible {
  color: inherit;
  text-decoration: none !important;
  text-decoration-line: none !important;
}

a *,
a:hover *,
a:focus-visible *,
button *,
button:hover *,
button:focus-visible *,
summary *,
summary:hover *,
summary:focus-visible * {
  text-decoration: none !important;
  text-decoration-line: none !important;
}

/* ============================================================
   Playful Brutalist Doodle UI — shared utilities
   Source of truth for: block-shadow 12/12, quote-mark gigante,
   micro-rotações, dropcap editorial, disciplina do símbolo ∞,
   transições brutalistas (100ms linear).
   ============================================================ */

/* ---------- Block shadow (printer's block, 12/12 standard) ---------- */
/* Use .lkd-block in combination with --shadow direction tokens.       */
.lkd-block          { box-shadow: 12px 12px 0 var(--color-ink); }
.lkd-block-yellow   { box-shadow: 12px 12px 0 var(--color-yellow); }
.lkd-block-sm       { box-shadow: 8px 8px 0 var(--color-ink); }
.lkd-block-sm-yellow{ box-shadow: 8px 8px 0 var(--color-yellow); }
/* Cards that already carry a 2px ink border + want the brutal shadow. */
.lkd-card-block {
  border: 2px solid var(--color-ink);
  box-shadow: 12px 12px 0 var(--color-ink);
}

/* ---------- Brutal hover/transition discipline ---------- */
/* Every interactive card or button SHOULD inherit this transition.    */
.lkd-tr             { transition: all 100ms linear; }
/* Cards lift toward the shadow on hover.                              */
.lkd-card-hover     { transition: transform 100ms linear, box-shadow 100ms linear; }
.lkd-card-hover:hover {
  transform: translate(-3px, -3px);
  box-shadow: 15px 15px 0 var(--color-ink);
}
.lkd-card-hover-yellow:hover {
  transform: translate(-3px, -3px);
  box-shadow: 15px 15px 0 var(--color-yellow);
}

/* ---------- Micro-rotações (playful, never bigger than ±1.4deg) ---------- */
.lkd-tilt-l   { transform: rotate(-1.2deg); }
.lkd-tilt-l-sm{ transform: rotate(-0.6deg); }
.lkd-tilt-r   { transform: rotate(1.2deg);  }
.lkd-tilt-r-sm{ transform: rotate(0.6deg);  }
.lkd-tilt-card { transform: rotate(-0.8deg); transform-origin: center center; }
.lkd-tilt-card:nth-child(2n) { transform: rotate(0.8deg); }

/* ---------- Quote-mark gigante (testimonials) ---------- */
/* Render a layered editorial quote. Use as decorative ::before via
   .lkd-quote-anchor, OR inline as <span class="lkd-quote-mark">«</span>. */
.lkd-quote-mark {
  font-family: var(--font-display);
  font-size: clamp(96px, 11vw, 140px);
  line-height: 0.7;
  letter-spacing: 0;
  color: var(--color-yellow);
  display: inline-block;
  pointer-events: none;
  user-select: none;
}
.lkd-quote-mark.is-ink { color: var(--color-ink); }
/* Decorative anchor variant — drops a giant « before the card edge. */
.lkd-quote-anchor { position: relative; }
.lkd-quote-anchor::before {
  content: "\00AB";
  position: absolute;
  top: -.35em;
  left: -.15em;
  font-family: var(--font-display);
  font-size: clamp(96px, 11vw, 140px);
  line-height: .7;
  letter-spacing: 0;
  color: var(--color-yellow);
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.lkd-quote-anchor > * { position: relative; z-index: 1; }

/* ---------- Dropcap editorial (opening paragraphs) ---------- */
.lkd-dropcap::first-letter {
  font-family: var(--font-display);
  font-size: 5em;
  line-height: .85;
  float: left;
  margin: .05em .12em 0 0;
  color: var(--color-ink);
  text-transform: uppercase;
}
.lkd-dropcap-yellow::first-letter {
  background: var(--color-yellow);
  color: var(--color-ink);
  padding: 0 .08em;
}
.lkd-dropcap-block::first-letter {
  background: var(--color-ink);
  color: var(--color-yellow);
  padding: 0 .08em;
}

/* ---------- Disciplina do símbolo ∞ ---------- */
/* Inline (within copy): exactly 1.2em of the parent.                  */
.lkd-inf {
  font-family: var(--font-display);
  font-size: 1.2em;
  line-height: 1;
  letter-spacing: 0;
  display: inline-block;
  transform: translateY(.04em);
}
/* Display (paired w/ a heading): 1.4× the heading size — use inline   */
/* style font-size for the parent and this class will scale relative.  */
.lkd-inf-display {
  font-family: var(--font-display);
  font-size: 1.4em;
  line-height: .9;
  letter-spacing: 0;
  display: inline-block;
  color: var(--color-yellow);
}

/* ---------- Editorial offset (cards "thrown on the table") ---------- */
.lkd-throw  { transform: rotate(-1deg) translate(-4px, 2px); }
.lkd-throw + .lkd-throw { transform: rotate(1.1deg) translate(4px, -2px); }