/* ==========================================================================
   INTERIOLYFX - BASE STYLESHEET
   Tokens, CSS Reset, Typography, Paper Grain, and Core Utilities
   ========================================================================== */

:root {
  /* Brand Color Palette */
  --g: #2c3a2a;      /* Deep Olive */
  --bone: #f1efe8;   /* Warm Bone Paper */
  --m: #dba11c;      /* Haldi Gold */
  --pk: #e9b8a6;     /* Gulabi Dusky Rose */
  --ink: #1e241d;    /* Charcoal Ink */
  --mut: #5c6657;    /* Muted Earth */
  --white: #ffffff;
  --cream: #fffdf6;

  /* 3D Model Room Defaults */
  --wall: #e9e5d8;
  --wall2: #d6d1c1;
  --floor: #8a6a48;
  --sofa: #2f4a8a;
  --blob: #e9b8a6;

  /* Typography Stacks */
  --se: 'Young Serif', Georgia, serif;
  --sans: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --hand: 'Caveat', cursive, sans-serif;

  /* Focus & Borders */
  --focus-ring: 3px solid var(--m);
  --border-dark: 2px solid var(--g);
  --border-light: 1.5px solid rgba(241, 239, 232, 0.35);
  --border-muted: 1.5px solid rgba(44, 58, 42, 0.2);
}

/* Universal Reset */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
  background-color: var(--bone);
  color: var(--ink);
}

body {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 1.06rem;
  line-height: 1.7;
  color: var(--ink);
  background-color: var(--bone);
  min-height: 100vh;
  position: relative;
}

/* Accessible Focus Rings */
:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 3px;
}

/* Typography Defaults */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--se);
  font-weight: 400;
  line-height: 1.15;
  color: var(--ink);
}

h1 {
  font-size: clamp(2.5rem, 5.5vw, 4.8rem);
  letter-spacing: -0.02em;
}

h2 {
  font-size: clamp(1.9rem, 3.8vw, 3rem);
  margin-bottom: 0.8rem;
  letter-spacing: -0.01em;
}

h3 {
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  line-height: 1.25;
}

h4 {
  font-size: 1.2rem;
}

p {
  margin-bottom: 1rem;
}

p:last-child {
  margin-bottom: 0;
}

a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

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

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
  background: none;
  border: none;
}

/* Handwritten Notes and Callouts */
.hand {
  font-family: var(--hand);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.15;
  color: var(--g);
}

.hand-lg {
  font-family: var(--hand);
  font-weight: 700;
  font-size: 2rem;
  line-height: 1.1;
  color: var(--g);
}

/* Marker Highlight Text */
.mk {
  background: linear-gradient(transparent 60%, var(--m) 60% 92%, transparent 92%);
  padding: 0 0.18em;
}

.mk-pk {
  background: linear-gradient(transparent 60%, var(--pk) 60% 92%, transparent 92%);
  padding: 0 0.18em;
}

/* Hand-drawn SVG Circle around text */
.circ {
  position: relative;
  display: inline-block;
}

.circ svg {
  position: absolute;
  left: -12%;
  top: -16%;
  width: 124%;
  height: 132%;
  fill: none;
  stroke: var(--m);
  stroke-width: 3.5;
  stroke-linecap: round;
  overflow: visible;
  pointer-events: none;
}

.circ path, .arr path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: drawStroke 1.4s 0.5s ease forwards;
}

@keyframes drawStroke {
  to {
    stroke-dashoffset: 0;
  }
}

/* Rotation Utility Classes (Replacing inline styles) */
.tilt-neg-1 { transform: rotate(-1deg); }
.tilt-pos-1 { transform: rotate(1deg); }
.tilt-neg-2 { transform: rotate(-2deg); }
.tilt-pos-2 { transform: rotate(2deg); }
.tilt-neg-3 { transform: rotate(-3deg); }
.tilt-pos-3 { transform: rotate(3deg); }
.tilt-neg-5 { transform: rotate(-5deg); }
.tilt-pos-5 { transform: rotate(5deg); }

/* Sticky Note Colors */
.sticky-yellow { background-color: #fff6c9; }
.sticky-pink { background-color: #fbd9cc; }
.sticky-green { background-color: #dbe8c8; }
.sticky-blue { background-color: #d7e4f2; }

/* Theming & Background Helpers */
.bg-bone { background-color: var(--bone); }
.bg-dark { background-color: var(--g); color: var(--bone); }
.bg-dark h1, .bg-dark h2, .bg-dark h3 { color: var(--bone); }
.bg-dark .hand { color: var(--m); }
.bg-haldi { background-color: var(--m); }
.bg-gulabi { background-color: var(--pk); }
.bg-light { background-color: #e4e0d3; }
.bg-white { background-color: var(--white); }

/* Organic Asymmetric Borders */
.round-organic-1 { border-radius: 28px 6px 28px 6px; }
.round-organic-2 { border-radius: 6px 28px 6px 28px; }
.round-pill { border-radius: 999px; }

/* Scroll Reveal */
.rv {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.rv.in {
  opacity: 1;
  transform: none;
}

/* Accessibility: Screen Reader Only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Layout, Spacing & Typography Utilities (Zero inline style enforcement) */
.mt-0 { margin-top: 0; }
.mt-xs { margin-top: 0.5rem; }
.mt-sm { margin-top: 1rem; }
.mt-md { margin-top: 1.8rem; }
.mt-lg { margin-top: 2.5rem; }
.mt-xl { margin-top: 3.5rem; }
.mt-2xl { margin-top: 4rem; }

.mb-0 { margin-bottom: 0; }
.mb-xs { margin-bottom: 0.5rem; }
.mb-sm { margin-bottom: 1rem; }
.mb-md { margin-bottom: 1.8rem; }

.mx-auto { margin-inline: auto; }
.text-center { text-align: center; }
.text-right { text-align: right; }

.flex-row { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; }
.flex-row-center { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.flex-between { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; }
.flex-between-baseline { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 1rem; }
.banner-flex { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1.5rem; }

.font-xs { font-size: 0.88rem; color: var(--mut); }
.font-sm { font-size: 0.94rem; color: var(--mut); }
.font-md { font-size: 1.05rem; }
.hand-sm { font-size: 1.15rem; }
.hand-404 { font-size: 3rem; color: var(--m); line-height: 1; }
.stat-value-sm { font-size: 1.15rem; }

.section-404 { padding: 7rem 0; }
.prose-body { margin-top: 2rem; font-size: 1.05rem; line-height: 1.8; }
.dialog-avatar { margin: 0 0 1rem 0; }
.dialog-text { margin-top: 1rem; color: var(--mut); line-height: 1.7; }

.pola-blueprint-wrap { margin: 2rem 0; border: 2px solid var(--g); border-radius: 8px; overflow: hidden; }
.card-cta-box { margin-top: 2.5rem; background: var(--white); padding: 2rem; border-radius: 8px; border: 2px solid var(--g); }
.scholarship-card { margin-top: 3rem; background: var(--white); border-left: 4px solid var(--m); }
.contact-first-card { margin-top: 0; }

/* Reduced Motion Safety */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .circ path, .arr path {
    stroke-dashoffset: 0 !important;
  }
  .rv {
    opacity: 1 !important;
    transform: none !important;
  }
}