/* ==========================================================================
   Sharry Minhas · RE/MAX  —  Design tokens, themes, reset, base typography
   Palette: limestone paper, warm ink, antique brass. Claret for affiliation.
   ========================================================================== */

@import url("../fonts/fonts.css");

/* ---------- Light: Limestone ---------- */
:root {
  color-scheme: light;

  --paper:        #F4F0E8;
  --paper-2:      #EAE4D8;
  --surface:      #FCFAF5;
  --surface-2:    #F1ECE2;
  --surface-3:    #E4DDCF;

  --ink:          #16130E;
  --ink-2:        #453F35;
  --ink-3:        #6B6354;

  --brass:        #7E561F;
  --brass-bright: #B4874B;
  /* Brass as it must appear ON --ink. The solid button is filled with --ink,
     which inverts with the theme, so this has to invert the other way. Using
     the theme's own brass there measured 1.37:1 in dark mode. */
  --brass-on-ink: #B4874B;
  --brass-wash:   rgba(180, 135, 75, 0.14);
  --claret:       #8A2A33;

  /* The primary action, declared rather than derived. Deriving it from
     --claret broke in dark, where claret is a pale pink text accent and the
     button fill inherited --paper for its label, giving a candy pink pill with
     dark text on it. A CTA should look like the same object in both themes:
     light text on a deep red. Measured 7.6:1 here, 4.7:1 in dark. */
  --cta-bg:       #8A2A33;
  --cta-fg:       #F7F3EC;

  --line:         rgba(22, 19, 14, 0.13);
  --line-2:       rgba(22, 19, 14, 0.24);
  --line-brass:   rgba(126, 86, 31, 0.32);

  /* The header is fixed over whatever scrolls under it, and the home hero is
     now a photograph. At 0.38 the sky came through and the wordmark's second
     line measured 1.55:1. Solved for: 0.62 is the point where the header's own
     surface carries the text rather than the image behind it. */
  --glass-bg:     rgba(252, 250, 245, 0.62);
  --glass-bg-2:   rgba(252, 250, 245, 0.62);
  --glass-blur:   30px;
  --glass-edge-1: rgba(255, 255, 255, 0.95);
  --glass-edge-2: rgba(22, 19, 14, 0.10);
  --scrim:        rgba(28, 24, 18, 0.46);

  --shadow-1: 0 1px 2px rgba(22, 19, 14, 0.04), 0 10px 26px -14px rgba(22, 19, 14, 0.16);
  --shadow-2: 0 2px 4px rgba(22, 19, 14, 0.05), 0 28px 64px -30px rgba(22, 19, 14, 0.26);
  --shadow-3: 0 3px 8px rgba(22, 19, 14, 0.06), 0 50px 100px -40px rgba(22, 19, 14, 0.34);
  --inner-lift: inset 0 1px 0 rgba(255, 255, 255, 0.7);

  /* Section bands, hero surfaces, and the drifting backdrop */
  --band:       rgba(253, 251, 246, 0.94);
  --feature:    rgba(231, 223, 208, 0.88);
  --divider:    #E7DFD0;
  --hero-bg:    #FBF8F1;
  --hero-glow:  rgba(180, 135, 75, 0.11);
  --drift-warm: 180, 135, 75;
  --drift-cool: 122, 116, 100;

  --grain-opacity: 0.030;
  --drift-opacity: 0.85;
}

/* ---------- Dark: Slate night ---------- */
:root[data-theme="dark"] {
  color-scheme: dark;

  --paper:        #100E0B;
  --paper-2:      #15120E;
  --surface:      #1A1611;
  --surface-2:    #221D17;
  --surface-3:    #2C251D;

  --ink:          #F4EFE5;
  --ink-2:        #BCB2A0;
  --ink-3:        #8F8677;

  --brass:        #DCAC63;
  --brass-bright: #EFC98D;
  --brass-on-ink: #7E561F;
  --brass-wash:   rgba(220, 172, 99, 0.13);
  --claret:       #DB7B83;
  --cta-bg:       #A8323E;
  --cta-fg:       #FFF6F0;

  --line:         rgba(244, 239, 229, 0.13);
  --line-2:       rgba(244, 239, 229, 0.26);
  --line-brass:   rgba(220, 172, 99, 0.34);

  --glass-bg:     rgba(21, 18, 14, 0.62);
  --glass-bg-2:   rgba(21, 18, 14, 0.58);
  --glass-blur:   30px;
  --glass-edge-1: rgba(244, 239, 229, 0.20);
  --glass-edge-2: rgba(0, 0, 0, 0.40);
  --scrim:        rgba(8, 7, 5, 0.66);

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.34), 0 10px 26px -14px rgba(0, 0, 0, 0.60);
  --shadow-2: 0 2px 4px rgba(0, 0, 0, 0.38), 0 28px 64px -30px rgba(0, 0, 0, 0.72);
  --shadow-3: 0 3px 8px rgba(0, 0, 0, 0.42), 0 50px 100px -40px rgba(0, 0, 0, 0.80);
  --inner-lift: inset 0 1px 0 rgba(244, 239, 229, 0.07);

  --band:       rgba(28, 24, 19, 0.86);
  --feature:    rgba(37, 31, 24, 0.90);
  --divider:    #221D16;
  --hero-bg:    #171310;
  --hero-glow:  rgba(220, 172, 99, 0.10);
  --drift-warm: 220, 172, 99;
  --drift-cool: 150, 138, 118;

  --grain-opacity: 0.042;
  --drift-opacity: 1;
}

/* ---------- Scales ---------- */
:root {
  --font-display: "Montserrat", "Helvetica Neue", "Segoe UI", system-ui, sans-serif;
  --font-ui: "Archivo", "Helvetica Neue", "Segoe UI", sans-serif;

  /* Montserrat carries a weight axis only. The opsz/SOFT/WONK settings the
     old display face used are simply ignored by the renderer, so they are
     removed rather than left as noise. */

  /* Fluid type: 375px floor, 1600px ceiling */
  --t--2: clamp(0.6875rem, 0.67rem + 0.08vw, 0.75rem);
  --t--1: clamp(0.8125rem, 0.79rem + 0.11vw, 0.875rem);
  --t-0:  clamp(1rem, 0.97rem + 0.14vw, 1.0625rem);
  --t-1:  clamp(1.125rem, 1.07rem + 0.26vw, 1.3125rem);
  --t-2:  clamp(1.375rem, 1.24rem + 0.6vw, 1.75rem);
  --t-3:  clamp(1.75rem, 1.47rem + 1.2vw, 2.5rem);
  --t-4:  clamp(2.25rem, 1.7rem + 2.35vw, 3.75rem);
  --t-5:  clamp(2.75rem, 1.72rem + 4.4vw, 5.5rem);
  --t-6:  clamp(3.25rem, 1.6rem + 7vw, 8rem);

  /* 4 / 8 rhythm */
  --s-1: 0.25rem;  --s-2: 0.5rem;   --s-3: 0.75rem;  --s-4: 1rem;
  --s-5: 1.5rem;   --s-6: 2rem;     --s-7: 2.5rem;   --s-8: 3rem;
  --s-9: 4rem;     --s-10: 5rem;    --s-11: 6rem;    --s-12: 8rem;

  --section-y: clamp(3.5rem, 2.5rem + 4.4vw, 7rem);
  --gutter: clamp(1.25rem, 0.7rem + 2.4vw, 3rem);

  --wrap: 78rem;
  --wrap-wide: 92rem;
  --wrap-read: 44rem;

  --r-xs: 6px;  --r-sm: 12px;  --r-md: 18px;
  --r-lg: 26px; --r-xl: 34px;  --r-pill: 999px;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-soft: cubic-bezier(0.4, 0.14, 0.3, 1);

  --d-press: 140ms;
  --d-hover: 220ms;
  --d-panel: 320ms;
  --d-reveal: 760ms;

  /* Systemic layers only */
  --z-rule: 20;
  --z-header: 40;
  --z-overlay: 60;
  --z-grain: 80;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 7rem;
}

body {
  min-height: 100dvh;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--t-0);
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: -0.003em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; background-color: var(--surface-2); }

input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; }

ul[class], ol[class] { list-style: none; padding: 0; }

:target { scroll-margin-top: 7rem; }

/* ---------- Base typography ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.032em;
  text-wrap: balance;
}

h1 { font-size: var(--t-5); }
h2 { font-size: var(--t-4); }
h3 { font-size: var(--t-2); font-weight: 600; line-height: 1.18; letter-spacing: -0.022em; }

/* A small UI-weight heading. Kept as a class rather than tied to h4 so the
   heading level can follow the document outline instead of the type scale. */
.h-label {
  font-family: var(--font-ui);
  font-size: var(--t-0);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.005em;
}

p { text-wrap: pretty; }

a {
  color: inherit;
  text-decoration-color: var(--line-2);
  text-underline-offset: 0.22em;
  text-decoration-thickness: from-font;
}

strong { font-weight: 600; }

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

/* Numerals in data positions stay column-aligned */
.tnum, .price, .spec, time, .stat__value {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ---------- Focus ---------- */
:focus { outline: none; }

:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

/* ---------- Skip link ---------- */
.skip-link {
  position: fixed;
  top: var(--s-4);
  left: 50%;
  z-index: 100;
  padding: var(--s-3) var(--s-5);
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-2);
  font-size: var(--t--1);
  font-weight: 600;
  text-decoration: none;
  transform: translate(-50%, -160%);
  transition: transform var(--d-panel) var(--ease-out);
}

.skip-link:focus-visible { transform: translate(-50%, 0); }

/* ---------- Film grain (fixed, never on a scrolling layer) ---------- */
.grain {
  position: fixed;
  inset: 0;
  z-index: var(--z-grain);
  pointer-events: none;
  opacity: var(--grain-opacity);
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  transition: opacity var(--d-panel) var(--ease-out);
}

:root[data-theme="dark"] .grain { mix-blend-mode: screen; }

/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* Reveals resolve instantly rather than staying hidden */
  [data-reveal] { opacity: 1 !important; transform: none !important; filter: none !important; }
}