/*
  neo-theme.css
  Neo-brutalist design system layered over Bootstrap 5.2.3
  Defines all tokens, component overrides, and utility classes
*/

/* ─────────────────────────────────────────────────────────────────────────── */
/* ROOT TOKENS                                                                   */
/* ─────────────────────────────────────────────────────────────────────────── */

:root {
  /* COLORS */
  --ink: #080808;
  --muted: #686868;
  --paper: #f7f4ef;
  --field: #ede8df;
  --yellow: #f7d84a;
  --orange: #ff6b35;
  --blue: #4f7cff;
  --green: #82d173;
  --line: rgba(8, 8, 8, 0.18);

  /* Syntax highlighting */
  --syntax-key: #9a4c00;
  --syntax-value: #1f5f99;
  --syntax-string: #316b1f;
  --syntax-comment: #686868;

  /* TYPOGRAPHY */
  --font-sans: Arial, Helvetica, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;
  --fw-regular: 400;
  --fw-bold: 700;
  --fw-extrabold: 800;
  --fw-black: 900;

  /* SHADOWS (hard, no blur) */
  --shadow-xs: 2px 2px 0 var(--ink);
  --shadow-sm: 3px 3px 0 var(--orange);
  --shadow-md: 4px 4px 0 var(--ink);
  --shadow-lg: 5px 5px 0 var(--ink);
  --shadow-xl: 10px 10px 0 var(--ink);
  --shadow-2xl: 12px 12px 0 var(--ink);

  /* SPACING */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  /* BORDERS */
  --border-default: 2px solid var(--ink);
  --border-subtle: 2px solid var(--line);
  --radius-none: 0;
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* BACKGROUND */
  --bg-page: radial-gradient(
      circle at 8% 18%,
      rgba(247, 216, 74, 0.75),
      transparent 18rem
    ),
    radial-gradient(
      circle at 92% 12%,
      rgba(255, 107, 53, 0.5),
      transparent 16rem
    ),
    radial-gradient(
      circle at 78% 88%,
      rgba(79, 124, 255, 0.35),
      transparent 20rem
    ),
    var(--paper);
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* BASE STYLES                                                                   */
/* ─────────────────────────────────────────────────────────────────────────── */

body {
  font-family: var(--font-sans);
  /* 1.25rem restates what currently leaks in from the legacy bundle's body
     rule in style.min.css, so page chrome no longer depends on load order or
     on that file surviving a future cleanup. Zero visual change. */
  font-size: 1.25rem;
  color: var(--ink);
  background: var(--bg-page);
  background-attachment: fixed;
  min-height: 100vh;
}

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

a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  color: var(--ink);
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* BOOTSTRAP COMPONENT OVERRIDES                                                 */
/* ─────────────────────────────────────────────────────────────────────────── */

/* HEADINGS */
h1, h2, h3, h4, h5, h6,
.display-1, .display-2, .display-3, .display-4 {
  font-weight: 800;
  letter-spacing: -0.06em;
  line-height: 0.9;
}

.display-1, .display-2, .display-3 {
  letter-spacing: -0.085em;
  line-height: 0.86;
}

.lead {
  font-weight: 700;
  letter-spacing: -0.03em;
}

/* NAVBAR */
.navbar {
  border-bottom: var(--border-default);
}

.navbar-brand {
  font-weight: 700;
  color: var(--ink);
}

.nav-link {
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  padding: 8px 14px;
  font-weight: 700;
  color: var(--ink);
  transition: all 0.15s ease;
}

.nav-link:hover {
  background-color: var(--field);
  border-color: var(--ink);
}

.nav-link.active,
.nav-link[aria-current="page"] {
  background-color: var(--paper);
  border-color: var(--orange);
  box-shadow: var(--shadow-sm);
}

.navbar-toggler {
  border: 2px solid var(--ink);
}

.navbar-toggler:focus {
  box-shadow: none;
  border-color: var(--ink);
}

/* BUTTONS */
.btn {
  border-radius: 0;
  border: 1px solid var(--ink);
  font-weight: 700;
  box-shadow: var(--shadow-lg);
  transform: rotate(-1deg);
  transition: all 0.18s ease;
}

.btn-primary {
  background-color: var(--yellow);
  color: var(--ink);
  border-color: var(--ink);
}

.btn-primary:hover {
  background-color: var(--orange);
  color: var(--ink);
  transform: rotate(1deg) translate(2px, 2px);
}

.btn-primary:focus {
  background-color: var(--orange);
  box-shadow: var(--shadow-lg), 0 0 0 0.25rem rgba(79, 124, 255, 0.25);
}

.btn-secondary {
  background-color: var(--field);
  color: var(--ink);
  border-color: var(--ink);
}

.btn-secondary:hover {
  background-color: var(--yellow);
  color: var(--ink);
}

.btn-outline-primary {
  color: var(--ink);
  border-color: var(--ink);
}

.btn-outline-primary:hover {
  background-color: var(--yellow);
  color: var(--ink);
  border-color: var(--ink);
}

/* CARDS */
.card {
  background-color: var(--paper);
  border: var(--border-default);
  border-radius: 0;
  box-shadow: var(--shadow-xl);
}

.card-header {
  background-color: var(--paper);
  border-bottom: var(--border-default);
  font-weight: 700;
}

.card-footer {
  background-color: var(--paper);
  border-top: var(--border-default);
}

/* FORMS */
.form-control,
input,
textarea,
select {
  background-color: var(--field);
  border: var(--border-default);
  border-radius: 0;
  box-shadow: var(--shadow-lg);
  padding: 14px 16px;
  color: var(--ink);
  font-family: var(--font-sans);
}

.form-control:focus,
input:focus,
textarea:focus,
select:focus {
  background-color: white;
  border-color: var(--ink);
  box-shadow: var(--shadow-lg);
  color: var(--ink);
}

label {
  font-weight: 700;
  color: var(--ink);
}

.form-check-input {
  border: 2px solid var(--ink);
  background-color: var(--field);
}

.form-check-input:checked {
  background-color: var(--yellow);
  border-color: var(--ink);
}

.form-check-input:focus {
  border-color: var(--ink);
  box-shadow: none;
}

/* TABLES */
table,
.table {
  border-color: var(--ink);
}

.table > thead > tr > th {
  background-color: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
  font-weight: 700;
}

.table > tbody > tr > td {
  border-color: var(--line);
  color: var(--ink);
}

.table > tbody > tr:hover {
  background-color: rgba(247, 216, 74, 0.15);
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* UTILITY CLASSES                                                               */
/* ─────────────────────────────────────────────────────────────────────────── */

/* Shadows */
.neo-shadow {
  box-shadow: var(--shadow-md);
}

.neo-shadow-lg {
  box-shadow: var(--shadow-lg);
}

.neo-shadow-xl {
  box-shadow: var(--shadow-xl);
}

/* Card base */
.neo-card {
  background-color: var(--paper);
  border: var(--border-default);
  border-radius: 0;
  box-shadow: var(--shadow-xl);
  padding: 20px;
}

/* Stickers / Tags */
.sticker {
  display: inline-block;
  border: 2px solid var(--ink);
  border-radius: var(--radius-pill);
  padding: 10px 14px;
  font-weight: 800;
  box-shadow: var(--shadow-md);
  background-color: var(--yellow);
  color: var(--ink);
  transform: rotate(-3deg);
}

.sticker:nth-child(2) {
  background-color: var(--blue);
  color: white;
  transform: rotate(2deg);
}

.sticker:nth-child(3) {
  background-color: var(--orange);
  color: white;
  transform: rotate(-1deg);
}

.sticker:nth-child(4) {
  background-color: var(--green);
  color: white;
  transform: rotate(1deg);
}

/* Tags / Chips */
.neo-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: 2px solid var(--ink);
  border-radius: 0;
  padding: 6px 10px;
  box-shadow: var(--shadow-xs);
  background-color: var(--paper);
  color: var(--ink);
}

/* Brand Grid */
.brand-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.brand-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 140px;
  background-color: var(--ink);
  color: var(--paper);
  font-weight: 900;
  letter-spacing: -0.06em;
  padding: 20px;
  text-align: center;
  border: 2px solid var(--ink);
}

.brand-tile--orange {
  background-color: var(--orange);
  color: white;
}

.brand-tile--yellow {
  background-color: var(--yellow);
  color: var(--ink);
}

.brand-tile--blue {
  background-color: var(--blue);
  color: white;
}

.brand-tile--green {
  background-color: var(--green);
  color: white;
}

/* Portrait Frame */
.portrait-frame {
  display: inline-block;
  background-color: var(--orange);
  border: var(--border-default);
  box-shadow: var(--shadow-2xl);
  padding: 14px;
  transform: rotate(-3deg);
}

.portrait-frame img {
  display: block;
  border: var(--border-default);
  object-fit: cover;
  width: 100%;
}

/* Kicker Badge */
.kicker {
  display: inline-block;
  background-color: var(--paper);
  border: var(--border-default);
  border-radius: 0;
  padding: 10px 14px;
  font-weight: 800;
  box-shadow: var(--shadow-lg);
  transform: rotate(1.5deg);
  transition: all 0.18s ease;
}

.kicker:hover {
  background-color: var(--blue);
  color: white;
  transform: rotate(1.5deg) translateY(-4px);
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* FOOTER                                                                        */
/* ─────────────────────────────────────────────────────────────────────────── */

footer {
  background-color: var(--ink);
  color: var(--paper);
  border-top: var(--border-default);
  padding: 28px 0;
  margin-top: auto;
}

footer a {
  color: var(--paper);
  line-height: 1;
}

footer a:hover {
  color: var(--yellow);
}

footer .small {
  color: var(--paper) !important;
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* RESPONSIVE                                                                    */
/* ─────────────────────────────────────────────────────────────────────────── */

@media (max-width: 880px) {
  :root {
    --shadow-xl: 6px 6px 0 var(--ink);
    --shadow-lg: 4px 4px 0 var(--ink);
    --shadow-2xl: 8px 8px 0 var(--ink);
  }

  body {
    background: radial-gradient(
        circle at 8% 18%,
        rgba(247, 216, 74, 0.4),
        transparent 18rem
      ),
      radial-gradient(
        circle at 92% 12%,
        rgba(255, 107, 53, 0.25),
        transparent 16rem
      ),
      radial-gradient(
        circle at 78% 88%,
        rgba(79, 124, 255, 0.15),
        transparent 20rem
      ),
      var(--paper);
    background-attachment: fixed;
  }

  .sticker {
    transform: rotate(-1deg);
  }

  .sticker:nth-child(2) {
    transform: rotate(0deg);
  }

  .sticker:nth-child(3) {
    transform: rotate(0deg);
  }

  .sticker:nth-child(4) {
    transform: rotate(0deg);
  }

  .portrait-frame {
    transform: rotate(-1deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}