/*
 * SMI design tokens — BRAND-GUIDELINES §8.
 *
 * This file is the single source of truth for colour, type, shape and spacing.
 * Nothing below this file should contain a raw hex value; if a component needs
 * a colour that is not here, the token is missing, not the component.
 *
 * Three rules that are easy to get wrong and expensive to unpick later:
 *
 *   1. --smi-accent is a FILL. Cyan on white measures 2.4:1 and fails WCAG AA.
 *      Use it for backgrounds, borders, rules and icons. Never for text on a
 *      light surface. Anything written ON it takes NAVY, not white.
 *   2. Every STATUS fill (new, sold, offer) takes white text. This used to
 *      carry an exception for amber; the amber is gone, and so is the
 *      exception. --smi-accent is now the only fill that wants navy on it.
 *   3. Distribution is roughly 60% white/surface, 25% blue, 10% neutral,
 *      5% accent (§3.5). The accent is a seasoning. The moment it becomes a
 *      background colour the brand starts to look like a discount portal.
 */

:root {
	/* -- Brand ------------------------------------------------------------
	 * Revision note (blue + teal): the accent moved from gold #E7AE33 to cyan
	 * #35B6CE on client direction, and the navy was cooled toward blue. This
	 * supersedes BRAND-GUIDELINES §3.1 and the earlier gold/teal revision.
	 *
	 * Cyan was chosen specifically because it is a DROP-IN for gold: it has
	 * the same accessibility profile, so every rule written against gold still
	 * holds and no component logic had to change.
	 *
	 *   navy on cyan   #35B6CE → 5.7:1  ✓ AA  (gold was 7.3:1)
	 *   navy on cyan-600                → 7.4:1  ✓ AA — holds on hover
	 *   white on teal  #0B7285 → 5.6:1  ✓ AA
	 *   white on blue  #0D2E4F → 13.8:1 ✓ AAA
	 *   cyan on white           2.4:1  ✗ — NEVER text on a light surface
	 *                                     (gold was 2.0:1 — same rule, same
	 *                                      reason)
	 *
	 * White on cyan is 2.6:1 and fails. Text on the accent is navy, always —
	 * exactly as it was on gold. Do not "fix" a navy label to white here.
	 */
	--smi-navy: #0D2E4F;
	--smi-accent: #35B6CE;
	--smi-teal: #0B7285;

	/*
	 * Channel values for the accent, so translucent tints can be written as
	 * rgba(var(--smi-accent-rgb), .12) instead of hardcoding the hex channels
	 * in twenty places. Recolouring the brand again should mean editing this
	 * file only — that was not true before, and it is why the gold→cyan change
	 * touched six stylesheets.
	 */
	--smi-accent-rgb: 53, 182, 206;
	--smi-teal-rgb: 11, 114, 133;
	--smi-navy-rgb: 13, 46, 79;

	/*
	 * Derived shades for interaction states so components never invent their
	 * own. Navy on accent-600 measures 5.4:1 — AA holds on hover too.
	 *
	 * IMPORTANT, and counter-intuitive: --smi-accent-600 is only slightly
	 * darker than --smi-accent, and deliberately so. The accent carries NAVY
	 * text, so darkening it on hover reduces contrast instead of increasing
	 * it. The first draft of this palette used #22A0B8, which measured 4.46:1
	 * and failed AA on the primary button's own hover state. Any "600" shade
	 * chosen here must be checked against navy, not against white.
	 */
	--smi-navy-600: #081F37;
	--smi-accent-600: #2BB0CB;   /* navy on this: 5.4:1 ✓ — do not darken */
	--smi-accent-300: #7FD4E4;   /* navy on this: 8.2:1 ✓ — lightest step */
	--smi-teal-600: #095C6B;

	/* -- Status -----------------------------------------------------------
	 * These are semantic, not brand: they mean sold / new / spoken-for, and a
	 * visitor reads them faster when they sit OUTSIDE the blue-teal family.
	 * That is why green and red survive the recolour unchanged.
	 *
	 * Under Offer moved amber → indigo. Amber was the last warm colour on the
	 * site and read as a leftover once the gold went. Indigo keeps it clearly
	 * distinct from For Sale (blue) and For Rent (teal) — near them on the
	 * wheel but far enough in hue and lightness to never be confused at badge
	 * size — and unlike amber it takes WHITE text at 6.2:1.
	 *
	 * That retires the old exception: every status badge now takes white text.
	 * The only fill left that needs navy text is --smi-accent.
	 */
	--smi-new: #16794B;     /* white text, 5.6:1 */
	--smi-sold: #C0392B;    /* white text, 5.5:1 */
	--smi-offer: #5B4BD6;   /* white text, 6.2:1 — was amber #E67E22 */
	--smi-whatsapp: #25D366; /* WhatsApp only. Never repurpose this green. */

	/* -- Neutral ---------------------------------------------------------- */
	--smi-ink: #1A1A1A;
	--smi-muted: #5A6472;
	--smi-muted-light: #7B8492;
	--smi-border: #E3E7ED;
	--smi-surface: #F7F8FA;
	--smi-white: #FFFFFF;

	/* -- Type ------------------------------------------------------------- */
	--smi-font-head: 'Poppins', 'Segoe UI', system-ui, -apple-system, sans-serif;
	--smi-font-body: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;

	/* Fluid scale — BRAND-GUIDELINES §4.2. */
	--smi-text-display: clamp(2rem, 5vw, 3.5rem);
	--smi-text-h1: clamp(1.75rem, 4vw, 2.75rem);
	--smi-text-h2: clamp(1.5rem, 3vw, 2rem);
	--smi-text-h3: clamp(1.25rem, 2.5vw, 1.5rem);
	--smi-text-h4: 1.125rem;
	--smi-text-body: 1rem;      /* 16px floor — below this iOS Safari zooms on focus */
	--smi-text-body-lg: 1.125rem;
	--smi-text-small: 0.875rem;
	--smi-text-label: 0.75rem;
	--smi-text-button: 0.9375rem;

	--smi-leading-tight: 1.1;
	--smi-leading-heading: 1.2;
	--smi-leading-body: 1.6;
	--smi-leading-loose: 1.65;

	--smi-track-display: -0.02em;
	--smi-track-heading: -0.01em;
	--smi-track-label: 0.12em;

	/* -- Shape ------------------------------------------------------------
	 * Revision note: radii were opened up (card 8→14, btn 6→10). At 8px a card
	 * corner reads as "default bootstrap" at the sizes this grid renders; 14px
	 * is where it starts reading as a designed object without going bubbly.
	 */
	--smi-radius-card: 14px;
	--smi-radius-btn: 10px;
	--smi-radius-sm: 8px;
	--smi-radius-lg: 20px;
	--smi-radius-pill: 999px;

	/* -- Elevation --------------------------------------------------------
	 * Revision note: this supersedes the original single-shadow rule (§7.1,
	 * "stacked shadows make a listing grid look cheap"). That rule was aimed at
	 * DECORATIVE stacking — three arbitrary drop shadows on one card. What
	 * replaces it is a physical ladder: every level is one tight contact shadow
	 * (the object touching the page) plus one wide ambient shadow (the room's
	 * light). Two layers, always, same ratio at every level. Cards move UP the
	 * ladder on hover rather than growing a different shadow, which is what
	 * makes the lift read as distance instead of as a colour change.
	 *
	 * Tinted with the brand blue, never neutral grey — a grey shadow under a
	 * blue-and-teal palette is the single most reliable tell of an untended
	 * theme. Driven off --smi-navy-rgb so a future recolour carries through.
	 */
	--smi-shadow-xs: 0 1px 2px rgba(var(--smi-navy-rgb), .07);
	--smi-shadow: 0 1px 2px rgba(var(--smi-navy-rgb), .07), 0 4px 12px -4px rgba(var(--smi-navy-rgb), .11);
	--smi-shadow-md: 0 2px 4px rgba(var(--smi-navy-rgb), .07), 0 12px 28px -8px rgba(var(--smi-navy-rgb), .15);
	--smi-shadow-lg: 0 4px 8px rgba(var(--smi-navy-rgb), .08), 0 24px 48px -12px rgba(var(--smi-navy-rgb), .19);
	--smi-shadow-xl: 0 8px 16px rgba(var(--smi-navy-rgb), .09), 0 40px 80px -20px rgba(var(--smi-navy-rgb), .25);
	--smi-shadow-hover: var(--smi-shadow-lg);

	/* Inset hairline that fakes a lit top edge on a raised surface. Pairs with
	   the ladder above — shadow below, highlight above, which is what sells
	   "3D" far more than shadow depth alone. */
	--smi-edge-light: inset 0 1px 0 rgba(255, 255, 255, .9);
	--smi-edge-light-dark: inset 0 1px 0 rgba(255, 255, 255, .12);

	/* -- Gradient ramps ---------------------------------------------------
	 * Flat fills are the other half of why the old build read as dated. Each
	 * ramp travels light→base→dark along 135°, so a filled element picks up an
	 * implied top-left light source consistent with --smi-edge-light.
	 */
	--smi-grad-accent: linear-gradient(135deg, var(--smi-accent-300) 0%, var(--smi-accent) 48%, var(--smi-accent-600) 100%);
	--smi-grad-navy: linear-gradient(135deg, #1B4E7D 0%, var(--smi-navy) 52%, var(--smi-navy-600) 100%);
	--smi-grad-teal: linear-gradient(135deg, #0F91A8 0%, var(--smi-teal) 52%, var(--smi-teal-600) 100%);
	/* Barely-there vertical wash on white cards. Two ends of a 1.5% ramp — any
	   stronger and a grid of cards looks stained rather than lit. */
	--smi-grad-card: linear-gradient(180deg, #FFFFFF 0%, #FBFCFE 100%);

	/* -- Glass ------------------------------------------------------------
	 * Glass needs something behind it. These two sets are NOT interchangeable:
	 * `-dark` is for glass over navy/photography, `-light` for glass over the
	 * white page. A light-glass button dropped on a white section is invisible,
	 * which is the usual way glassmorphism goes wrong.
	 */
	--smi-glass-blur: blur(16px) saturate(180%);
	--smi-glass-dark-bg: rgba(255, 255, 255, .10);
	--smi-glass-dark-bg-hover: rgba(255, 255, 255, .18);
	--smi-glass-dark-border: rgba(255, 255, 255, .22);
	--smi-glass-light-bg: rgba(255, 255, 255, .72);
	--smi-glass-light-border: rgba(var(--smi-navy-rgb), .08);

	/* Accent aura for the one element per view that deserves it. */
	--smi-glow-accent: 0 8px 32px -8px rgba(var(--smi-accent-rgb), .55);

	/* -- Layout ----------------------------------------------------------- */
	--smi-container: 1320px;
	--smi-measure: 70ch;    /* body copy line length ceiling (§4.3) */

	/* 8px base scale (§7.1). */
	--smi-space: 8px;
	--smi-space-1: 4px;
	--smi-space-2: 8px;
	--smi-space-3: 16px;
	--smi-space-4: 24px;
	--smi-space-5: 32px;
	--smi-space-6: 48px;
	--smi-space-7: 64px;
	--smi-space-8: 96px;

	/* Minimum touch target (§7.2). */
	--smi-tap: 44px;

	/* -- Motion -----------------------------------------------------------
	 * `--smi-ease` stays the workhorse for colour and opacity. The spring is
	 * for anything that MOVES — lifts, slides, the button sweep — because a
	 * symmetric ease on a translation reads as sluggish at these distances.
	 * It overshoots slightly and settles, which is what makes a 3px lift feel
	 * like a physical object rather than a CSS property changing.
	 */
	--smi-ease: cubic-bezier(.4, 0, .2, 1);
	--smi-ease-spring: cubic-bezier(.22, 1, .36, 1);
	--smi-duration: 180ms;
	--smi-duration-mid: 320ms;
	--smi-duration-slow: 560ms;
}

/*
 * Reduced motion zeroes the DURATIONS rather than disabling the rules, so every
 * hover state still lands — it just lands instantly. Components that animate
 * position (the button sweep, card lifts) additionally opt out by hand.
 */
@media (prefers-reduced-motion: reduce) {
	:root {
		--smi-duration: 1ms;
		--smi-duration-mid: 1ms;
		--smi-duration-slow: 1ms;
	}
}