/* brand.css - Halvest brand layer (Neue Montreal, aubergine + grain, Halvest purple).
 * Loaded after the Vite bundle and brand-<hash>.css, so equal-specificity rules here win.
 * Palette source: Halvest Brand Kit (logo #6935D3 / #28134E, presentation template). */

@font-face {
  font-family: 'Neue Montreal';
  src: url('../fonts/NeueMontreal-Regular.otf') format('opentype');
  font-weight: 100 450;
  font-style: normal;
  font-display: swap;
}

/* The family only ships Regular and Medium; serve Medium for 500-900 so
   semibold/bold labels never get faux-bolded. */
@font-face {
  font-family: 'Neue Montreal';
  src: url('../fonts/NeueMontreal-Medium.otf') format('opentype');
  font-weight: 451 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --hv-font: 'Neue Montreal', 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --hv-font-family: var(--hv-font);
  --hv-aubergine: #28134e;
  --hv-aubergine-deep: #1b0d34;
  --hv-lilac: #cc8aff;
  --hv-pink: #ff91f7;
  --hv-cream: #fff6c4;
  --hv-sky: #4cbbff;
  --hv-mint: #9bf7a2;
  --hv-teal: #32d3c6;
  --hv-link: #6935d3;
  --hv-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

html.dark {
  --hv-link: #bba0f5;
}

/* ---------- Typography ---------- */
html,
body,
.font-sans {
  font-family: var(--hv-font);
}

body {
  font-feature-settings: 'ss01' on;
  letter-spacing: 0.005em;
}

h1, h2, h3,
.text-2xl, .text-3xl, .text-4xl,
.text-\[20px\], .text-\[22px\], .text-\[24px\] {
  letter-spacing: -0.015em;
}

::selection {
  background: rgba(105, 53, 211, 0.22);
}

html.dark ::selection {
  background: rgba(204, 138, 255, 0.32);
}

/* ---------- Primary-coloured text stays legible on aubergine surfaces ----------
   :where() keeps specificity at one class, so hover/active variants still win. */
:where(html.dark) .text-primary {
  color: #bba0f5;
}

:where(html.dark) .border-primary {
  border-color: #8a5ce6;
}

/* ---------- Top navigation: active route as a Halvest purple pill ----------
   .rounded keeps this above the hover:bg-* utilities (0,2,2 vs 0,2,0). */
header a.rounded[aria-current='page'] {
  background-color: #f1edfb;
  color: #6935d3;
}

html.dark header a.rounded[aria-current='page'] {
  background-color: rgba(105, 53, 211, 0.28);
  color: #d8c8fb;
}

/* ---------- Scrollbars ---------- */
* {
  scrollbar-color: rgba(113, 103, 150, 0.45) transparent;
}

/* ---------- Auth screens (login, signup, forgot/reset password, invitation) ---------- */
:root .login-bg.login-bg {
  isolation: isolate;
  background:
    radial-gradient(900px 520px at 85% 110%, rgba(255, 145, 247, 0.22), transparent 60%),
    radial-gradient(800px 520px at -10% -10%, rgba(105, 53, 211, 0.55), transparent 60%),
    radial-gradient(600px 400px at 110% -10%, rgba(76, 187, 255, 0.16), transparent 60%),
    var(--hv-aubergine);
  color-scheme: dark;
}

/* film grain from the brand template */
:root .login-bg.login-bg::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: var(--hv-grain);
  opacity: 0.12;
  mix-blend-mode: overlay;
}

/* Grainscape illustration anchoring the composition on wide screens */
@media (min-width: 1024px) {
  :root .login-bg.login-bg::after {
    content: '';
    position: fixed;
    left: max(2rem, calc(50% - 46rem));
    bottom: -2rem;
    z-index: -1;
    width: clamp(240px, 24vw, 380px);
    aspect-ratio: 480 / 590;
    pointer-events: none;
    background: url('../img/grain-growth.png') no-repeat left bottom / contain;
    opacity: 0.95;
  }
}

.login-bg > div:last-child > div.max-w-md {
  border-radius: 20px;
  border-color: rgba(255, 255, 255, 0.6);
  background-color: #ffffff;
  box-shadow: 0 30px 80px -20px rgba(11, 4, 28, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.04);
}

html.dark .login-bg > div:last-child > div.max-w-md {
  border-color: rgba(255, 255, 255, 0.08);
  background-color: rgba(25, 15, 51, 0.92);
}

.login-bg > div:last-child > div.max-w-md .text-\[20px\] {
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.02em;
}

/* theme toggle sits on the aubergine backdrop in both themes, pinned to the viewport corner */
.login-bg > div:last-child > div.absolute {
  position: fixed;
}

.login-bg > div:last-child > div.absolute > button {
  border-color: rgba(255, 255, 255, 0.16);
  background-color: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

.login-bg > div:last-child > div.absolute > button:hover {
  background-color: rgba(255, 255, 255, 0.16);
}

.login-bg a.text-blue-600,
.login-bg .text-blue-600 {
  color: var(--hv-link);
}

/* primary auth action: solid brand purple, pill-soft radius */
.login-bg form button.bg-primary\/90 {
  border-radius: 10px;
  background-color: #6935d3;
  box-shadow: 0 6px 16px -6px rgba(105, 53, 211, 0.7);
}

.login-bg form button.bg-primary\/90:hover {
  background-color: #5828bd;
}

/* ---------- Form controls ---------- */
.input,
input.input,
textarea.input {
  border-radius: 10px;
}

html.dark .input,
html.dark input.input,
html.dark textarea.input,
html.dark select.input {
  background-color: #140b29;
  border-color: rgba(255, 255, 255, 0.1);
}

/* Autofill must not flash white on dark surfaces */
html.dark input:-webkit-autofill,
html.dark input:-webkit-autofill:hover,
html.dark input:-webkit-autofill:focus {
  -webkit-text-fill-color: #e7e2f3;
  -webkit-box-shadow: 0 0 0 1000px #140b29 inset;
  caret-color: #e7e2f3;
}

input[type='checkbox'],
input[type='radio'] {
  accent-color: #6935d3;
}

/* ---------- Buttons ---------- */
.btn {
  border-radius: 10px;
}

/* ---------- Cards / panels ---------- */
.shadow-linear {
  --tw-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.03), 0 8px 24px -12px rgba(40, 19, 78, 0.25);
}

html.dark .shadow-linear {
  --tw-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.04), 0 10px 28px -14px rgba(0, 0, 0, 0.7);
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html, body {
    transition: none !important;
  }
}