/* ==========================================================================
   H20 Property Services — design system "Clear"
   --------------------------------------------------------------------------
   tokens.css holds every decision that is not a component: colour, type,
   space, radius, elevation, motion, and layout rhythm. Nothing here paints a
   component, so it loads first and stays cheap to reason about.

   The system is deliberately quiet. Our audience is renters of every age and
   every level of eyesight, on cheap phones and old laptops, so the rules are:

   1. Paper first. The page is white; text is near-black. Structure comes from
      hairline rules and whitespace, never from shadow, blur or gradient.
   2. One accent. A single muted teal marks what is interactive. Warm ochre is
      scarcer still — availability and price emphasis only.
   3. Square by default. Every radius is 2px. Nothing is a pill, nothing is a
      bubble; the page should read like a printed notice, not an app store.
   4. Big, plain type. Body text is ~17-18px at 1.6 leading. Headings are
      large but light-weight, so they feel calm rather than shouty.

   Two naming rules keep it honest:

   - Primitives are named for what they are (--teal-700), semantics for what
     they do (--brand, --surface). Components only use semantics, so a palette
     change is one edit here.
   - Anything that changes on a dark surface is a `--deep-*` token or is
     overridden in `.on-deep`. A section flips one class; every nested
     component follows.
   ========================================================================== */

/* --------------------------------------------------------------- primitives
   Neutrals are very slightly cool so they sit calmly under the teal accent;
   they are not pure grey, which reads as dead on cheap LCD panels. */

:root {
  --paper: #ffffff;

  /* The neutral ramp is tuned so a tinted band and a hairline are both
     unmistakable on a cheap screen in daylight. The first pass had the band
     at #f7f8f7, which is close enough to white that people could not tell a
     panel from the page. */
  --mist-50: #f8f9f8;
  --mist-100: #f1f3f2;
  --mist-200: #e4e8e6;
  --mist-300: #d2d7d5;
  --mist-400: #b0b7b5;

  --ink-500: #5f676b;
  --ink-600: #4c5457;
  --ink-700: #333a3d;
  --ink-800: #22282a;
  --ink-900: #171b1d;
  --ink-950: #0e1213;

  /* Teal — the water note. --teal-700 is the one that carries white text at
     7.5:1, so it is the only teal allowed to be a filled button. */
  --teal-900: #0e3b43;
  --teal-800: #144c56;
  --teal-700: #1b5c68;
  --teal-600: #226e7c;
  --teal-200: #bbd4d8;
  --teal-100: #e4eef0;
  --teal-50: #f0f6f7;

  /* Ochre — scarcity is the point. 5.3:1 on white, so it is legible as text. */
  --ochre-700: #7a4e12;
  --ochre-600: #94601a;
  --ochre-300: #e8b878;
  --ochre-100: #fbf2e3;

  --green-600: #1a6b45;
  --green-100: #e7f2eb;

  --red-600: #9e2b20;
  --red-500: #b3352a;
  --red-100: #fbebe8;

  --white: #ffffff;
}

/* ------------------------------------------------------- legacy primitives
   The first draft of this site used a five-family palette (marine / aqua /
   sand / sun / slate) and a few component rules still name those primitives
   directly. They are aliased onto the Clear palette above rather than deleted
   so no rule silently stops resolving; new or edited rules must use the
   semantic tokens instead. */

:root {
  --marine-950: var(--ink-950);
  --marine-900: var(--ink-950);
  --marine-850: var(--ink-900);
  --marine-800: var(--ink-900);
  --marine-700: var(--ink-800);
  --marine-600: var(--teal-900);
  --marine-500: var(--teal-800);

  --aqua-800: var(--teal-800);
  --aqua-700: var(--teal-700);
  --aqua-600: var(--teal-700);
  --aqua-500: var(--teal-600);
  --aqua-400: var(--teal-600);
  --aqua-300: var(--teal-200);
  --aqua-200: var(--teal-100);
  --aqua-100: var(--teal-100);
  --aqua-50: var(--teal-50);

  --sand-50: var(--paper);
  --sand-100: var(--mist-50);
  --sand-200: var(--mist-100);
  --sand-300: var(--mist-200);
  --sand-400: var(--mist-400);

  --sun-700: var(--ochre-700);
  --sun-600: var(--ochre-600);
  --sun-500: var(--ochre-600);
  --sun-400: var(--ochre-600);
  --sun-100: var(--ochre-100);

  --slate-900: var(--ink-900);
  --slate-800: var(--ink-800);
  --slate-700: var(--ink-700);
  --slate-600: var(--ink-600);
  --slate-500: var(--ink-500);
  --slate-400: var(--mist-400);
  --slate-300: var(--mist-300);
  --slate-200: var(--mist-200);
  --slate-100: var(--mist-100);
}

/* ------------------------------------------------------------ semantic: light
   The default theme. Borders are solid hex rather than color-mix() so they
   survive on older browsers and never resolve to a surprise tint. */

:root {
  --bg: var(--paper);
  --bg-sunk: var(--mist-50);
  --surface: var(--paper);
  --surface-2: var(--mist-50);
  --surface-3: var(--mist-100);
  --surface-inverse: var(--ink-950);

  --ink: var(--ink-900);
  --ink-2: var(--ink-700);
  --ink-3: var(--ink-500);
  --ink-4: var(--mist-400);
  --ink-inverse: #f4f6f6;

  --line: #dfe3e1;
  --line-2: #c7cdcb;
  --line-3: #98a19f;

  --brand: var(--teal-700);
  --brand-hover: var(--teal-800);
  --brand-active: var(--teal-900);
  --brand-soft: var(--teal-50);
  --brand-soft-2: var(--teal-100);
  --brand-line: var(--teal-200);
  --on-brand: var(--white);

  /* Ochre is a *text* accent on paper, so it takes its readable step. */
  --accent: var(--ochre-700);
  --accent-soft: var(--ochre-100);
  --accent-ink: var(--ochre-700);

  --positive: var(--green-600);
  --positive-soft: var(--green-100);
  --danger: var(--red-600);
  --danger-hover: #7f221a;
  --danger-soft: var(--red-100);

  --focus-ring: rgba(27, 92, 104, 0.4);

  --overlay: rgba(14, 18, 19, 0.64);
  /* Functional, not decorative: photo captions and gallery arrows must stay
     readable over an unknown photograph. */
  --scrim: linear-gradient(180deg, rgba(14, 18, 19, 0) 42%, rgba(14, 18, 19, 0.72) 100%);

  --deep-muted: #9fb3b6;
  --deep-danger: #f0a49b;
  --on-sun: #2e1c04;
}

/* ------------------------------------------------------------- semantic: deep
   A flat near-black band. Used for the footer and at most one mid-page
   section; never for the hero, and never a gradient. */

.on-deep {
  --bg: var(--ink-950);
  --surface: #191e20;
  --surface-2: #22282a;
  --surface-3: #2c3335;

  --ink: var(--ink-inverse);
  --ink-2: #c3cbcb;
  --ink-3: #99a3a4;
  --ink-4: #7b8687;

  --line: rgba(255, 255, 255, 0.16);
  --line-2: rgba(255, 255, 255, 0.24);
  --line-3: rgba(255, 255, 255, 0.36);

  /* On black the accent must *lighten* to stay legible. */
  --brand: #7fc0cb;
  --brand-hover: #a5d6dd;
  --brand-active: #cbe8ec;
  --brand-soft: rgba(127, 192, 203, 0.14);
  --brand-soft-2: rgba(127, 192, 203, 0.22);
  --brand-line: rgba(127, 192, 203, 0.4);
  --on-brand: var(--ink-950);

  --accent: #e0b072;
  --accent-soft: rgba(224, 176, 114, 0.16);
  --accent-ink: #f4d9b4;

  --positive: #7ed3a6;
  --danger: #f0a49b;

  --focus-ring: rgba(127, 192, 203, 0.5);
  --scrim: linear-gradient(180deg, rgba(14, 18, 19, 0) 30%, rgba(14, 18, 19, 0.86) 100%);

  color: var(--ink);
  background-color: var(--bg);
}

/* ------------------------------------------------------------------- type
   Outfit carries headings: geometric, plain, and light enough at display size
   that a big headline reads as calm. Inter carries everything that has to be
   read in a hurry or at small size — facts, prices, forms, admin — because it
   is the most legible thing we can serve without a licence fee. */

:root {
  --font-display: 'Outfit', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  /* Fluid scale. Every step is clamped, so nothing needs a media query. Body
     text lands at 16.5-18px, which is bigger than the web default on purpose. */
  --step--2: clamp(0.75rem, 0.73rem + 0.08vw, 0.81rem);
  --step--1: clamp(0.84rem, 0.82rem + 0.12vw, 0.92rem);
  --step-0: clamp(1.03rem, 1.00rem + 0.16vw, 1.13rem);
  --step-1: clamp(1.15rem, 1.10rem + 0.24vw, 1.30rem);
  --step-2: clamp(1.30rem, 1.22rem + 0.38vw, 1.55rem);
  --step-3: clamp(1.52rem, 1.38rem + 0.66vw, 1.95rem);
  --step-4: clamp(1.80rem, 1.54rem + 1.20vw, 2.50rem);
  --step-5: clamp(2.10rem, 1.66rem + 2.00vw, 3.20rem);
  --step-6: clamp(2.40rem, 1.70rem + 3.20vw, 4.00rem);

  --leading-tight: 1.12;
  --leading-snug: 1.3;
  --leading-normal: 1.6;
  --leading-relaxed: 1.75;

  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-caps: 0.1em;

  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
}

/* ------------------------------------------------------------------ space
   A 4px grid. The named layout tokens are the only ones page code should use;
   the numbered steps are for interior spacing. */

:root {
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-7: 1.75rem;
  --sp-8: 2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;

  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --page-max: 1180px;
  --wide-max: 1440px;
  --narrow-max: 720px;
  --prose-max: 68ch;

  --header-h: 72px;
  --section-y: clamp(4rem, 7vw, 6.5rem);

  /* The one box size for a control a thumb aims at. The header's call button
     and its menu button are the same size because they are the same kind of
     thing; two different sizes in one row reads as a mistake. */
  --control-sm: 44px;
  --control: 48px;
}

/* --------------------------------------------------------- radius & elevation
   Square, decisively. There is no size at which a 2px corner is wrong here,
   which is why one token covers every case. Elevation is a whisper: cards get
   a hairline border and almost no shadow, so a page of them still looks flat. */

:root {
  --r-xs: 2px;
  --r-sm: 2px;
  --r-md: 2px;
  --r-lg: 2px;
  --r-xl: 2px;
  --r-2xl: 2px;
  --r-pill: 2px;

  --sh-xs: 0 1px 2px rgba(14, 18, 19, 0.06);
  --sh-sm: 0 2px 6px -2px rgba(14, 18, 19, 0.1);
  --sh-md: 0 8px 20px -10px rgba(14, 18, 19, 0.16);
  --sh-lg: 0 18px 40px -20px rgba(14, 18, 19, 0.22);
  --sh-xl: 0 28px 60px -28px rgba(14, 18, 19, 0.26);
  --sh-inset: inset 0 1px 0 rgba(255, 255, 255, 0.06);

  --ring: 0 0 0 3px var(--focus-ring);
}

/* ---------------------------------------------------------------- motion
   One easing curve for almost everything, one for things that should feel
   like they snapped into place. Durations are short; this site should never
   make someone wait to read it. */

:root {
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;
  --dur-4: 520ms;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0.05, 0.36, 1);
  --ease-pop: cubic-bezier(0.34, 1.4, 0.64, 1);

  --transition-colors: color var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
  --transition-lift: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}

/* ---------------------------------------------------------------- z-index */

:root {
  --z-base: 1;
  --z-sticky: 100;
  --z-header: 200;
  --z-drawer: 300;
  --z-modal: 400;
  --z-toast: 500;
}

/* -------------------------------------------------------- gradient recipes
   Deliberately flat. These names survive so an unconverted rule cannot paint
   a surprise; the only true gradients left are the ones that keep white text
   legible over photography. */

:root {
  --grad-deep: var(--ink-950);
  --grad-aqua: var(--brand);
  --grad-sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0));
  --grad-fade-up: linear-gradient(180deg, rgba(255, 255, 255, 0), var(--bg));
  --grad-media: linear-gradient(180deg, rgba(14, 18, 19, 0) 42%, rgba(14, 18, 19, 0.7) 100%);
}