/* ==========================================================================
   Aumtara — Custom CSS beyond Tailwind
   Design system: see /design-system/MASTER.md
   ========================================================================== */

/* ---------- CSS variables (mirror Tailwind tokens for use in pseudo-element gradients) ---------- */
:root {
  --surface-bright: #FFFBF3;
  --surface: #FAF6EE;
  --surface-container-low: #F5EFE3;
  --surface-container: #EFE7D5;
  --primary: #7B1F2B;
  --secondary: #D4A017;
}

/* ---------- Base typography ---------- */
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6, .font-headline {
  font-family: 'Manrope', system-ui, sans-serif;
}

/* ---------- Scooped corner utilities (pie-slice pattern — legacy) ---------- */
/* These carve a concave quarter-circle OUT of the element. */
/* Use only for the "pie-slice" look. For Prana-style pockets, use .pocket-inv-* below. */
.scoop-bl {
  --scoop: 48px;
  -webkit-mask: radial-gradient(circle at 0 100%,    transparent var(--scoop), black calc(var(--scoop) + 0.5px));
          mask: radial-gradient(circle at 0 100%,    transparent var(--scoop), black calc(var(--scoop) + 0.5px));
}
.scoop-br {
  --scoop: 48px;
  -webkit-mask: radial-gradient(circle at 100% 100%, transparent var(--scoop), black calc(var(--scoop) + 0.5px));
          mask: radial-gradient(circle at 100% 100%, transparent var(--scoop), black calc(var(--scoop) + 0.5px));
}
.scoop-tl {
  --scoop: 48px;
  -webkit-mask: radial-gradient(circle at 0 0,       transparent var(--scoop), black calc(var(--scoop) + 0.5px));
          mask: radial-gradient(circle at 0 0,       transparent var(--scoop), black calc(var(--scoop) + 0.5px));
}
.scoop-tr {
  --scoop: 48px;
  -webkit-mask: radial-gradient(circle at 100% 0,    transparent var(--scoop), black calc(var(--scoop) + 0.5px));
          mask: radial-gradient(circle at 100% 0,    transparent var(--scoop), black calc(var(--scoop) + 0.5px));
}

/* ---------- Inverted corner pocket (Prana-style scooped card) ---------- */
/*
   Uses an SVG background-image to define the EXACT pocket shape with a smooth
   reflex/S-curve at the top-right. The shape has:
     - Flat top edge
     - Small convex quarter-circle at the top-right where the edge turns
     - Larger concave quarter-circle bite continuing the turn (the "scoop")
     - Vertical right edge continuing down
   Together these form a tangent-continuous S-curve — the hallmark of Prana's
   program cards — rather than a single 90° concave bite.

   Because the SVG uses preserveAspectRatio="none", the curves scale with the
   pocket's aspect ratio. For near-square pockets the curves remain nearly
   circular; for very wide/tall pockets they become slightly elliptical.
   This is an acceptable trade-off for the clean one-element implementation.

   Tailwind's bg-surface-bright is overridden to transparent; the SVG provides
   the cream fill directly, so the shape and its S-curve are pixel-accurate.

   Markup:
     <div class="pocket-inv-tr ...">content</div>
   (Note: do NOT also add bg-surface-bright — the SVG is the background.)
*/
.pocket-inv-tr {
  position: relative;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 60' preserveAspectRatio='none'%3E%3Cpath fill='%23FFFBF3' d='M 0 0 L 82 0 Q 86 0 86 4 Q 86 18 100 18 L 100 60 L 0 60 Z'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.pocket-inv-tl {
  position: relative;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 60' preserveAspectRatio='none'%3E%3Cpath fill='%23FFFBF3' d='M 100 0 L 18 0 Q 14 0 14 4 Q 14 18 0 18 L 0 60 L 100 60 Z'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

/* ---------- Focus ring ---------- */
:focus { outline: none; }
:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px #FAF6EE,
    0 0 0 4px rgba(212, 160, 23, 0.6);
  border-radius: inherit;
}

/* ---------- Selection ---------- */
::selection { background: #F4D078; color: #5A4018; }

/* ---------- Image placeholder styling (remove when real images arrive) ---------- */
.img-placeholder {
  background:
    linear-gradient(135deg, #E8DEC6 0%, #D4B784 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #5A4018;
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  padding: 2rem;
  text-align: center;
}
.img-placeholder::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 30% 30%, rgba(168, 83, 97, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 70% 70%, rgba(212, 160, 23, 0.12) 0%, transparent 50%);
  pointer-events: none;
}

/* ---------- Decorative quote mark (testimonials) ---------- */
.quote-mark {
  position: absolute;
  top: -0.5rem;
  left: 1rem;
  font-family: 'Manrope', sans-serif;
  font-weight: 800;
  font-size: 8rem;
  line-height: 1;
  color: rgba(212, 160, 23, 0.25);
  pointer-events: none;
  user-select: none;
}

/* ---------- Reduced motion ---------- */
@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;
  }
}

/* ---------- Print basics ---------- */
@media print {
  nav, footer, .no-print { display: none !important; }
  body { background: white; color: black; }
}