/* ==========================================================================
   HABAÑERO BRUTALISM — Divan's personal style kit v2
   Neo-brutalism first · light-first · retrofuturist seasoning · sustainable
   Palette: MP113 by Alex Cristache
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,700;12..96,800&family=Archivo:wght@400;500;700&family=Space+Mono:wght@400;700&display=swap');

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* palette — MP113 */
  --luster-white:   #F4F1EC;
  --jodhpur-tan:    #DAD1C8;
  --aster-blue:     #9BACD8;
  --habanero:       #F98513;
  --space-royal:    #223382;
  --deadly-depths:  #111144;

  /* semantic (light-first) */
  --bg-base:        var(--luster-white);   /* page background            */
  --bg-raised:      var(--jodhpur-tan);    /* section bands, muted cards */
  --ink:            var(--deadly-depths);  /* borders, shadows, text     */
  --text-primary:   var(--deadly-depths);
  --text-secondary: var(--space-royal);
  --accent:         var(--habanero);       /* FILLS ONLY, never text     */
  --accent-soft:    var(--aster-blue);

  /* structure */
  --border-w:       2px;
  --border:         var(--border-w) solid var(--ink);
  --border-thick:   3px solid var(--ink);
  --radius:         4px;
  --radius-none:    0;

  /* hard shadows — zero blur, always */
  --shadow-hard:    5px 5px 0 var(--ink);
  --shadow-hard-sm: 3px 3px 0 var(--ink);
  --shadow-hard-lg: 8px 8px 0 var(--ink);
  --shadow-accent:  5px 5px 0 var(--accent);      /* ONE hero element per page */
  --shadow-soft-accent: 5px 5px 0 var(--accent-soft);

  /* gradients — garnish, ONE per view */
  --gradient-garnish: linear-gradient(135deg,
      var(--habanero) 0%, var(--habanero) 35%,
      var(--aster-blue) 65%, var(--aster-blue) 100%);
  --gradient-deep: linear-gradient(135deg,
      var(--habanero) 0%, var(--habanero) 30%,
      var(--space-royal) 70%, var(--space-royal) 100%);

  /* type */
  --font-display: 'Bricolage Grotesque', 'Archivo', sans-serif;
  --font-body:    'Archivo', system-ui, sans-serif;
  --font-mono:    'Space Mono', 'Courier New', monospace;

  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-lg:   20px;
  --text-xl:   28px;
  --text-2xl:  40px;
  --text-3xl:  clamp(48px, 8vw, 96px);   /* hero display */

  /* spacing rhythm (8px base) */
  --space-1: 4px;  --space-2: 8px;   --space-3: 16px;  --space-4: 24px;
  --space-5: 32px; --space-6: 48px;  --space-7: 64px;  --space-8: 96px;
  --space-9: 128px;

  /* motion */
  --transition: 200ms ease-out;
  --nav-height: 68px;
}

/* dark variant (secondary — derived, never hand-tuned) */
[data-theme="dark"] {
  --bg-base:        var(--deadly-depths);
  --bg-raised:      var(--space-royal);
  --ink:            var(--luster-white);
  --text-primary:   var(--luster-white);
  --text-secondary: var(--jodhpur-tan);
}

/* --------------------------------------------------------------------------
   2. RESET + BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-3);
}
h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }

p { max-width: 70ch; margin: 0 0 var(--space-3); }

a {
  color: var(--text-secondary);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
a:hover { background: var(--accent); color: var(--ink); text-decoration: none; }

img, svg { max-width: 100%; display: block; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* --------------------------------------------------------------------------
   3. UTILITIES
   -------------------------------------------------------------------------- */
/* mono terminal label — the retrofuturist voice */
.mono-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
}

/* highlight block behind one headline word: <span class="hl">word</span> */
.hl {
  background: var(--accent);
  color: var(--ink);
  padding: 0 0.15em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.hl-blue { background: var(--accent-soft); }

/* the ONE gradient per page */
.gradient-bar    { height: 6px; background: var(--gradient-garnish); }
.gradient-bar-lg { height: 12px; background: var(--gradient-deep); }

/* thin retro grid texture — use inside ONE shape only, never page-wide */
.grid-texture {
  background-image:
    linear-gradient(var(--accent-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--accent-soft) 1px, transparent 1px);
  background-size: 24px 24px;
  opacity: 0.35;
}

/* slight sticker rotations */
.tilt-l { transform: rotate(-2deg); }
.tilt-r { transform: rotate(2deg); }

/* --------------------------------------------------------------------------
   4. LAYOUT
   -------------------------------------------------------------------------- */
.page-wrapper {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 var(--space-4);
}

.section       { padding: var(--space-8) 0; }
.section-band  { background: var(--bg-raised); border-top: var(--border); border-bottom: var(--border); }
.section-rule  { border: 0; border-top: var(--border-thick); margin: 0; }

.grid-2 { display: grid; gap: var(--space-4); grid-template-columns: repeat(2, 1fr); }
.grid-3 { display: grid; gap: var(--space-4); grid-template-columns: repeat(3, 1fr); }
@media (max-width: 820px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   5. NAVBAR
   -------------------------------------------------------------------------- */
.navbar {
  position: sticky; top: 0; z-index: 50;
  height: var(--nav-height);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--space-4);
  background: var(--bg-base);
  border-bottom: var(--border);
}
.navbar-brand {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-lg);
  text-decoration: none;
  color: var(--text-primary);
}
.navbar-brand:hover { background: none; }
.navbar-links { display: flex; gap: var(--space-2); list-style: none; margin: 0; padding: 0; }
.navbar-links a {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: none;
  color: var(--text-primary);
  padding: var(--space-1) var(--space-2);
}
.navbar-links a:hover,
.navbar-links a.active { background: var(--accent); color: var(--ink); }

/* --------------------------------------------------------------------------
   6. BUTTONS — press INTO the shadow on hover
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: none;
  color: var(--ink);
  background: var(--bg-base);
  border: var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-hard);
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition),
              background var(--transition);
}
.btn:hover, .btn:active {
  transform: translate(5px, 5px);
  box-shadow: 0 0 0 var(--ink);
  background: var(--bg-raised);
}
.btn:disabled {
  opacity: 0.45; cursor: not-allowed;
  transform: none; box-shadow: var(--shadow-hard);
}

.btn-primary { background: var(--accent); }
.btn-primary:hover { background: var(--gradient-garnish); } /* counts as the page gradient if used */

.btn-blue { background: var(--accent-soft); }

.btn-dark { background: var(--ink); color: var(--bg-base); }
.btn-dark:hover { background: var(--space-royal); color: var(--luster-white); }

/* --------------------------------------------------------------------------
   7. CARDS
   -------------------------------------------------------------------------- */
.card {
  background: var(--bg-base);
  border: var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-hard);
  padding: var(--space-4);
  transition: transform var(--transition), box-shadow var(--transition);
}
.card:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--ink); }
.card-muted { background: var(--bg-raised); }
.card-hero  { box-shadow: var(--shadow-accent); }  /* max ONE per page */
.card-static, .card-static:hover { transform: none; box-shadow: var(--shadow-hard); }

/* terminal-style card header */
.card-terminal { padding: 0; overflow: hidden; }
.card-terminal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-2) var(--space-3);
  border-bottom: var(--border);
  background: var(--bg-raised);
}
.card-terminal-body { padding: var(--space-4); }

/* --------------------------------------------------------------------------
   8. STICKER TAGS + BADGES
   -------------------------------------------------------------------------- */
.tag {
  display: inline-block;
  padding: 2px 10px;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink);
  background: var(--bg-base);
  border: var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-hard-sm);
}
.tag-orange { background: var(--accent); }
.tag-blue   { background: var(--accent-soft); }
.tag-tan    { background: var(--bg-raised); }

/* --------------------------------------------------------------------------
   9. FORMS
   -------------------------------------------------------------------------- */
.form-group { margin-bottom: var(--space-4); }

.form-label {
  display: block;
  margin-bottom: var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.form-input, .form-select, .form-textarea {
  width: 100%;
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--text-primary);
  background: var(--bg-base);
  border: var(--border);
  border-radius: var(--radius);
  transition: box-shadow var(--transition), border-color var(--transition);
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 3px 3px 0 var(--accent);
}

.form-error {
  display: block;
  margin-top: var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
.form-error::before { content: "[!] "; font-weight: 700; }
.form-input.is-error { border-color: var(--space-royal); box-shadow: 3px 3px 0 var(--space-royal); }

/* --------------------------------------------------------------------------
   10. TABLES
   -------------------------------------------------------------------------- */
.table-wrap { border: var(--border); border-radius: var(--radius); box-shadow: var(--shadow-hard); overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; background: var(--bg-base); }
.table th {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-align: left;
  padding: var(--space-2) var(--space-3);
  background: var(--bg-raised);
  border-bottom: var(--border);
}
.table td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--jodhpur-tan); }
.table tr:last-child td { border-bottom: none; }
.table tr:hover td { background: var(--bg-raised); }

/* --------------------------------------------------------------------------
   11. MARQUEE TICKER (optional, one per page)
   -------------------------------------------------------------------------- */
.marquee {
  overflow: hidden;
  background: var(--ink);
  border-top: var(--border); border-bottom: var(--border);
  padding: var(--space-2) 0;
}
.marquee-track {
  display: inline-block;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--habanero);
  animation: marquee 24s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* --------------------------------------------------------------------------
   12. STAT BLOCKS
   -------------------------------------------------------------------------- */
.stat {
  border: var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-hard);
  padding: var(--space-4);
  background: var(--bg-base);
}
.stat-value {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-2xl);
  line-height: 1;
}
.stat-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
  margin-top: var(--space-1);
}

/* --------------------------------------------------------------------------
   13. FOOTER
   -------------------------------------------------------------------------- */
.footer {
  border-top: var(--border-thick);
  padding: var(--space-6) 0;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}