/* ============================================================
   Arya Monani — Portfolio
   Neobrutalist · warm pastel · shadcn token pattern
   ============================================================ */

:root {
  /* Light mode */
  --background: 40 60% 94%;
  --foreground: 20 20% 15%;
  --card: 40 50% 96%;
  --card-foreground: 20 20% 15%;
  --popover: 40 50% 96%;
  --popover-foreground: 20 20% 15%;
  --primary: 194 50% 78%;
  --primary-foreground: 20 20% 15%;
  --secondary: 350 45% 75%;
  --secondary-foreground: 20 20% 15%;
  --accent: 35 45% 82%;
  --accent-foreground: 20 20% 15%;
  --lavender: 270 45% 88%;
  --peach: 30 50% 82%;
  --cyan: 180 60% 85%;
  --muted: 40 30% 90%;
  --muted-foreground: 20 10% 40%;
  --destructive: 0 100% 50%;
  --destructive-foreground: 0 0% 100%;
  --border: 20 20% 15%;
  --input: 20 20% 15%;
  --ring: 194 50% 78%;
  --radius: 1rem;

  --shadow-brutal: 4px 4px 0 0 hsl(20 20% 15%);
  --shadow-brutal-lg: 6px 6px 0 0 hsl(20 20% 15%);
  --shadow-brutal-xl: 8px 8px 0 0 hsl(20 20% 15%);
  --shadow-brutal-primary: 4px 4px 0 0 hsl(194 50% 78%);
  --shadow-brutal-accent: 4px 4px 0 0 hsl(35 45% 82%);
  --shadow-brutal-secondary: 4px 4px 0 0 hsl(350 45% 75%);
}

.dark {
  --background: 0 0% 5%;
  --foreground: 60 9% 98%;
  --card: 0 0% 10%;
  --card-foreground: 60 9% 98%;
  --popover: 0 0% 10%;
  --popover-foreground: 60 9% 98%;
  --primary: 194 55% 75%;
  --primary-foreground: 0 0% 10%;
  --secondary: 195 55% 75%;
  --secondary-foreground: 0 0% 10%;
  --accent: 35 45% 78%;
  --accent-foreground: 0 0% 10%;
  --lavender: 270 50% 82%;
  --peach: 30 50% 78%;
  --cyan: 180 60% 82%;
  --muted: 0 0% 15%;
  --muted-foreground: 60 5% 65%;
  --border: 60 9% 98%;
  --input: 60 9% 98%;
  --ring: 194 55% 75%;

  --shadow-brutal: 4px 4px 0 0 hsl(60 9% 98%);
  --shadow-brutal-lg: 8px 8px 0 0 hsl(60 9% 98%);
  --shadow-brutal-xl: 12px 12px 0 0 hsl(60 9% 98%);
  --shadow-brutal-primary: 4px 4px 0 0 hsl(194 55% 75%);
  --shadow-brutal-accent: 4px 4px 0 0 hsl(35 45% 78%);
  --shadow-brutal-secondary: 4px 4px 0 0 hsl(195 55% 75%);
}

/* ---------- base ---------- */
* { border-color: hsl(var(--border)); }
html { scroll-behavior: smooth; }
body {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'ss01' on;
}

::selection { background: hsl(var(--foreground)); color: hsl(var(--background)); }

/* ---------- font utilities ---------- */
.font-display { font-family: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif; }
.font-mono    { font-family: 'Space Mono', ui-monospace, monospace; }
.font-fun     { font-family: 'Luckiest Guy', cursive; letter-spacing: 0.02em; }

/* ---------- bg utilities (via vars) ---------- */
.bg-background { background-color: hsl(var(--background)); }
.bg-card       { background-color: hsl(var(--card)); }
.bg-primary    { background-color: hsl(var(--primary)); }
.bg-secondary  { background-color: hsl(var(--secondary)); }
.bg-accent     { background-color: hsl(var(--accent)); }
.bg-lavender   { background-color: hsl(var(--lavender)); }
.bg-peach      { background-color: hsl(var(--peach)); }
.bg-cyan       { background-color: hsl(var(--cyan)); }
.bg-muted      { background-color: hsl(var(--muted)); }
.bg-fg         { background-color: hsl(var(--foreground)); }

.text-fg       { color: hsl(var(--foreground)); }
.text-muted-fg { color: hsl(var(--muted-foreground)); }
.text-bg       { color: hsl(var(--background)); }

.border-fg     { border-color: hsl(var(--border)); }

/* ---------- brutal card / button ---------- */
.brutal {
  border: 2px solid hsl(var(--border));
  border-radius: var(--radius);
  box-shadow: var(--shadow-brutal);
  transition: transform .18s ease, box-shadow .18s ease, background-color .25s ease;
}
.brutal-lg { box-shadow: var(--shadow-brutal-lg); }
.brutal-xl { box-shadow: var(--shadow-brutal-xl); }

.brutal-hover:hover {
  transform: translate(4px, 4px);
  box-shadow: 0 0 0 0 hsl(var(--border));
}
.brutal-lg.brutal-hover:hover { transform: translate(6px, 6px); }
.brutal-xl.brutal-hover:hover { transform: translate(8px, 8px); }

/* ---------- button ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  border: 2px solid hsl(var(--border));
  border-radius: var(--radius);
  background: hsl(var(--card));
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  box-shadow: var(--shadow-brutal);
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background-color .25s ease;
}
.btn:hover { transform: translate(4px, 4px); box-shadow: 0 0 0 0 hsl(var(--border)); }
.btn.btn-primary   { background: hsl(var(--primary)); }
.btn.btn-secondary { background: hsl(var(--secondary)); }
.btn.btn-accent    { background: hsl(var(--accent)); }
.btn.btn-fg        { background: hsl(var(--foreground)); color: hsl(var(--background)); }

/* small icon btn */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  border: 2px solid hsl(var(--border));
  border-radius: var(--radius);
  background: hsl(var(--card));
  box-shadow: var(--shadow-brutal);
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease;
}
.icon-btn:hover { transform: translate(4px,4px); box-shadow: 0 0 0 0 hsl(var(--border)); }

/* tag / chip */
.tag {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .65rem;
  border: 2px solid hsl(var(--border));
  border-radius: 999px;
  font-family: 'Space Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: hsl(var(--card));
}

/* eyebrow label */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: 'Space Mono', monospace;
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  color: hsl(var(--muted-foreground));
}
.eyebrow .dot { width: 8px; height: 8px; border-radius: 999px; background: hsl(var(--foreground)); display: inline-block; }

/* mini section heading — same family/style as big display headings, smaller */
.h-mini {
  font-family: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  font-weight: 700;
  font-style: italic;
  font-size: 1.5rem;          /* 24px */
  line-height: 1.08;
  letter-spacing: -0.01em;
  display: inline-block !important;
  position: relative;
  padding-bottom: 0.22em;
}
@media (min-width: 768px) {
  .h-mini { font-size: 1.875rem; }   /* 30px */
}
.h-mini::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 5px;
  border-radius: 999px;
  background: hsl(var(--primary));
}
.h-mini.h-mini--secondary::after { background: hsl(var(--secondary)); }
.h-mini.h-mini--accent::after    { background: hsl(var(--accent)); }
.h-mini.h-mini--lavender::after  { background: hsl(var(--lavender)); }
.h-mini.h-mini--peach::after     { background: hsl(var(--peach)); }
.h-mini.h-mini--cyan::after      { background: hsl(var(--cyan)); }

/* rotation helpers */
.rot--3 { transform: rotate(-3deg); }
.rot--1 { transform: rotate(-1deg); }
.rot-1  { transform: rotate(1deg); }
.rot-3  { transform: rotate(3deg); }
.rot-6  { transform: rotate(6deg); }

/* marquee */
@keyframes scroll-x {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.marquee-track { animation: scroll-x 42s linear infinite; }

/* container */
.container-x {
  width: 100%;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
@media (min-width: 768px) {
  .container-x { padding-left: 2rem; padding-right: 2rem; }
}
@media (min-width: 1280px) {
  .container-x { padding-left: 3rem; padding-right: 3rem; }
}

/* paper grain (very subtle) */
.grain {
  background-image:
    radial-gradient(hsla(20, 20%, 15%, 0.025) 1px, transparent 1px),
    radial-gradient(hsla(20, 20%, 15%, 0.015) 1px, transparent 1px);
  background-size: 4px 4px, 9px 9px;
  background-position: 0 0, 2px 3px;
}
.dark .grain {
  background-image:
    radial-gradient(hsla(60, 9%, 98%, 0.03) 1px, transparent 1px),
    radial-gradient(hsla(60, 9%, 98%, 0.02) 1px, transparent 1px);
}

/* link uline */
a.uline { background-image: linear-gradient(currentColor, currentColor); background-size: 100% 2px; background-repeat: no-repeat; background-position: 0 100%; padding-bottom: 2px; transition: background-size .25s ease; }
a.uline:hover { background-size: 100% 0px; }

/* sticker — used very sparingly */
.sticker {
  display: inline-block;
  background: hsl(var(--secondary));
  border: 2px solid hsl(var(--border));
  border-radius: 999px;
  padding: .35rem .9rem;
  font-family: 'Space Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  box-shadow: var(--shadow-brutal);
}

/* checklist bullets */
.check-list li {
  position: relative;
  padding-left: 2.25rem;
  line-height: 1.55;
}
.check-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.45rem;
  width: 1.35rem; height: 1.35rem;
  background: hsl(var(--primary));
  border: 2px solid hsl(var(--border));
  border-radius: 6px;
}
.check-list li::after {
  content: "✓";
  position: absolute;
  left: .35rem; top: .25rem;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
}
.check-list li + li { margin-top: .9rem; }

/* numbered list (case study sections) */
.num-list { counter-reset: numl; }
.num-list li {
  counter-increment: numl;
  display: grid;
  grid-template-columns: 3.25rem 1fr;
  gap: 1rem;
  padding: 1rem 0;
  border-top: 2px dashed hsl(var(--border) / 0.3);
}
.num-list li:first-child { border-top: none; }
.num-list li::before {
  content: counter(numl, decimal-leading-zero);
  font-family: 'Space Mono', monospace;
  font-size: .75rem;
  letter-spacing: .14em;
  color: hsl(var(--muted-foreground));
  padding-top: .25rem;
}

/* metric tile */
.metric-tile {
  border: 2px solid hsl(var(--border));
  border-radius: var(--radius);
  padding: 1.5rem;
  background: hsl(var(--card));
  box-shadow: var(--shadow-brutal);
}
.metric-tile .n {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: clamp(2.25rem, 5vw, 3.25rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
}
.metric-tile .lbl {
  margin-top: .65rem;
  font-family: 'Space Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: hsl(var(--muted-foreground));
}

/* focus */
:focus-visible {
  outline: 2px solid hsl(var(--foreground));
  outline-offset: 3px;
  border-radius: 6px;
}

/* footer link list */
.foot-link {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .5rem .85rem;
  border: 2px solid hsl(var(--border));
  border-radius: 999px;
  background: hsl(var(--card));
  box-shadow: var(--shadow-brutal);
  font-family: 'Space Mono', monospace;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  transition: transform .18s ease, box-shadow .18s ease, background-color .2s ease;
}
.foot-link:hover { transform: translate(4px, 4px); box-shadow: 0 0 0 0 hsl(var(--border)); background: hsl(var(--primary)); }

/* nav active */
.nav-link {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  padding: .5rem .9rem;
  border-radius: 10px;
  transition: background-color .2s ease;
}
.nav-link:hover { background: hsl(var(--accent) / 0.6); }
.nav-link.active { background: hsl(var(--primary)); border: 2px solid hsl(var(--border)); padding: calc(.5rem - 2px) calc(.9rem - 2px); }

/* underline reveal */
@keyframes uw {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* dashed divider */
.divider-dashed { border-top: 2px dashed hsl(var(--border) / 0.35); }

/* prose-ish (case study body) */
.prose-body p { font-size: 1.0625rem; line-height: 1.65; color: hsl(var(--foreground) / 0.88); }
.prose-body p + p { margin-top: 1.1rem; }
.prose-body strong { font-weight: 600; color: hsl(var(--foreground)); }
@media (min-width: 768px) {
  .prose-body p { font-size: 1.125rem; line-height: 1.7; }
}

/* image frame */
.img-frame {
  border: 2px solid hsl(var(--border));
  border-radius: var(--radius);
  box-shadow: var(--shadow-brutal-lg);
  overflow: hidden;
  background: hsl(var(--accent));
}

/* placeholder slot */
.ph-slot {
  position: relative;
  border: 2px solid hsl(var(--border));
  border-radius: var(--radius);
  background:
    repeating-linear-gradient(
      45deg,
      hsl(var(--accent)) 0,
      hsl(var(--accent)) 12px,
      hsl(var(--peach)) 12px,
      hsl(var(--peach)) 24px
    );
}
.ph-slot .ph-label {
  position: absolute;
  inset: auto 0 0 0;
  background: hsl(var(--background));
  border-top: 2px solid hsl(var(--border));
  padding: .5rem .75rem;
  font-family: 'Space Mono', monospace;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .12em;
}