/**
 * Bhumiwala design tokens.
 *
 * The single place any colour, size, weight or duration is defined. Nothing
 * anywhere else in the build may hard-code a hex value or a pixel size — if a
 * value is needed twice, it belongs here.
 *
 * ── Swapping the brand ────────────────────────────────────────────────────
 * The palette below is a considered default, not a brand decision: Bhumiwala
 * has not supplied one yet. Replacing it is a single edit to the --bw-brand-*
 * and --bw-accent-* ramps in this file. Nothing else needs to change.
 *
 * The direction is deep navy carrying a brass accent. Navy is the trust
 * signal the category runs on; brass keeps it out of the generic blue SaaS
 * register that every proptech dashboard already occupies, and it survives
 * being laid over a photograph, which a mid-blue does not.
 *
 * ── Fonts ─────────────────────────────────────────────────────────────────
 * The stacks are system fonts today. That is a placeholder awaiting the brand
 * typeface, not a final choice. Self-host the real faces into assets/fonts/,
 * add the @font-face blocks, and change --bw-font-sans / --bw-font-display
 * here. No other file references a font name.
 */

:root {
	color-scheme: light dark;

	/* ── Brand: deep navy ────────────────────────────────────────────── */
	--bw-brand-50:  #eef3f8;
	--bw-brand-100: #d6e2ee;
	--bw-brand-200: #adc4dc;
	--bw-brand-300: #7d9fc4;
	--bw-brand-400: #4b74a1;
	--bw-brand-500: #2d5580;
	--bw-brand-600: #1d3f65;
	--bw-brand-700: #142f4d;
	--bw-brand-800: #0e2338;
	--bw-brand-900: #0a1928;

	/* ── Accent: brass ───────────────────────────────────────────────── */
	--bw-accent-50:  #fbf5e9;
	--bw-accent-100: #f4e6c8;
	--bw-accent-200: #e8cd93;
	--bw-accent-300: #d9b062;
	--bw-accent-400: #c9963c;
	--bw-accent-500: #b07d26;
	--bw-accent-600: #8f631d;
	--bw-accent-700: #6d4b17;

	/* ── Neutrals, warmed so they sit with the brass ─────────────────── */
	--bw-neutral-0:   #ffffff;
	--bw-neutral-50:  #faf8f5;
	--bw-neutral-100: #f3f0ec;
	--bw-neutral-200: #e6e1da;
	--bw-neutral-300: #d2ccc3;
	--bw-neutral-400: #a49d93;
	--bw-neutral-500: #7a736a;
	--bw-neutral-600: #5a544c;
	--bw-neutral-700: #403b35;
	--bw-neutral-800: #2a2621;
	--bw-neutral-900: #171412;

	/* ── Semantic ────────────────────────────────────────────────────── */
	--bw-success: #1f7a52;
	--bw-warning: #a86a12;
	--bw-danger:  #a52a21;
	--bw-info:    var(--bw-brand-500);

	/* ── Applied roles. Components read these, never the ramps above ─── */
	--bw-bg:            var(--bw-neutral-0);
	--bw-bg-subtle:     var(--bw-neutral-50);
	--bw-bg-muted:      var(--bw-neutral-100);
	--bw-bg-inverse:    var(--bw-brand-900);

	--bw-text:          var(--bw-neutral-900);
	--bw-text-muted:    var(--bw-neutral-600);
	--bw-text-subtle:   var(--bw-neutral-500);
	--bw-text-inverse:  var(--bw-neutral-0);
	--bw-text-on-accent: var(--bw-brand-900);

	--bw-border:        var(--bw-neutral-200);
	--bw-border-strong: var(--bw-neutral-300);

	--bw-link:          var(--bw-brand-600);
	--bw-link-hover:    var(--bw-brand-800);

	/* Focus ring is its own token: it must never be tuned per-component,
	   because an inconsistent focus ring is an accessibility bug. */
	--bw-focus:         var(--bw-accent-500);
	--bw-focus-width:   3px;
	--bw-focus-offset:  2px;

	/* ── Typography ──────────────────────────────────────────────────── */
	--bw-font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
		"Helvetica Neue", Arial, "Noto Sans", sans-serif,
		"Apple Color Emoji", "Segoe UI Emoji";
	--bw-font-display: var(--bw-font-sans);
	--bw-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
		"Liberation Mono", monospace;

	/* A 1.2 ratio, rounded to values that land on whole pixels at 16px. */
	--bw-text-2xs:  0.6875rem; /* 11 */
	--bw-text-xs:   0.75rem;   /* 12 */
	--bw-text-sm:   0.875rem;  /* 14 */
	--bw-text-base: 1rem;      /* 16 */
	--bw-text-md:   1.125rem;  /* 18 */
	--bw-text-lg:   1.375rem;  /* 22 */
	--bw-text-xl:   1.75rem;   /* 28 */
	--bw-text-2xl:  2.125rem;  /* 34 */
	--bw-text-3xl:  2.75rem;   /* 44 */
	--bw-text-4xl:  3.5rem;    /* 56 */

	/* Headings interpolate between mobile and 1440px so nothing needs a
	   media query to stay in proportion. */
	--bw-display-1: clamp(2.125rem, 1.35rem + 3.4vw, 3.5rem);
	--bw-display-2: clamp(1.75rem, 1.24rem + 2.3vw, 2.75rem);
	--bw-display-3: clamp(1.375rem, 1.1rem + 1.2vw, 2.125rem);

	--bw-weight-regular:  400;
	--bw-weight-medium:   500;
	--bw-weight-semibold: 600;
	--bw-weight-bold:     700;

	--bw-leading-tight:   1.15;
	--bw-leading-snug:    1.3;
	--bw-leading-normal:  1.6;
	--bw-leading-relaxed: 1.75;

	--bw-tracking-tight: -0.02em;
	--bw-tracking-wide:  0.04em;

	/* ── Spacing: a 4px base, doubling loosely ───────────────────────── */
	--bw-space-1:  0.25rem;  /* 4  */
	--bw-space-2:  0.5rem;   /* 8  */
	--bw-space-3:  0.75rem;  /* 12 */
	--bw-space-4:  1rem;     /* 16 */
	--bw-space-5:  1.5rem;   /* 24 */
	--bw-space-6:  2rem;     /* 32 */
	--bw-space-7:  3rem;     /* 48 */
	--bw-space-8:  4rem;     /* 64 */
	--bw-space-9:  6rem;     /* 96 */
	--bw-space-10: 8rem;     /* 128 */

	/* Vertical rhythm between page sections, fluid like the headings. */
	--bw-section-y: clamp(3rem, 2rem + 4vw, 6rem);

	/* ── Layout ──────────────────────────────────────────────────────── */
	--bw-container:      1280px;
	--bw-container-wide: 1440px;
	--bw-container-text: 68ch;
	--bw-gutter:         clamp(1rem, 0.6rem + 2vw, 2rem);

	/* ── Radii ───────────────────────────────────────────────────────── */
	--bw-radius-xs:   4px;
	--bw-radius-sm:   6px;
	--bw-radius-md:   10px;
	--bw-radius-lg:   16px;
	--bw-radius-xl:   24px;
	--bw-radius-full: 999px;

	/* ── Elevation. Tinted with the brand hue rather than pure black,
	     which is what stops cards looking like they are floating in
	     dirty grey. ───────────────────────────────────────────────────── */
	--bw-shadow-xs: 0 1px 2px rgb(10 25 40 / 0.06);
	--bw-shadow-sm: 0 1px 3px rgb(10 25 40 / 0.08), 0 1px 2px rgb(10 25 40 / 0.04);
	--bw-shadow-md: 0 4px 12px rgb(10 25 40 / 0.09), 0 2px 4px rgb(10 25 40 / 0.05);
	--bw-shadow-lg: 0 12px 28px rgb(10 25 40 / 0.12), 0 4px 8px rgb(10 25 40 / 0.06);
	--bw-shadow-xl: 0 24px 56px rgb(10 25 40 / 0.16);

	/* ── Motion ──────────────────────────────────────────────────────── */
	--bw-duration-fast: 120ms;
	--bw-duration-base: 200ms;
	--bw-duration-slow: 320ms;
	--bw-ease:      cubic-bezier(0.4, 0, 0.2, 1);
	--bw-ease-out:  cubic-bezier(0.16, 1, 0.3, 1);

	/* ── Stacking. Named so nobody ever writes z-index: 99999 again. ── */
	--bw-z-base:     1;
	--bw-z-sticky:   100;
	--bw-z-header:   200;
	--bw-z-dropdown: 300;
	--bw-z-tray:     400;
	--bw-z-overlay:  500;
	--bw-z-modal:    600;
	--bw-z-toast:    700;
}

/*
 * Dark mode.
 *
 * Only the applied roles are redefined — the ramps stay put, so a brand swap
 * still only means editing one place. The brand darkens to near-black rather
 * than staying navy, because a mid-navy surface behind a property photograph
 * reads as a colour cast rather than as a background.
 */
@media (prefers-color-scheme: dark) {
	:root {
		--bw-bg:           #0d1117;
		--bw-bg-subtle:    #141a22;
		--bw-bg-muted:     #1b222c;
		--bw-bg-inverse:   var(--bw-neutral-0);

		--bw-text:         #e9e6e1;
		--bw-text-muted:   #a8a29a;
		--bw-text-subtle:  #857f77;
		--bw-text-inverse: var(--bw-neutral-900);

		--bw-border:        #262d38;
		--bw-border-strong: #3a424f;

		--bw-link:       var(--bw-accent-300);
		--bw-link-hover: var(--bw-accent-200);

		--bw-focus: var(--bw-accent-300);

		--bw-shadow-xs: 0 1px 2px rgb(0 0 0 / 0.4);
		--bw-shadow-sm: 0 1px 3px rgb(0 0 0 / 0.5), 0 1px 2px rgb(0 0 0 / 0.3);
		--bw-shadow-md: 0 4px 12px rgb(0 0 0 / 0.55), 0 2px 4px rgb(0 0 0 / 0.35);
		--bw-shadow-lg: 0 12px 28px rgb(0 0 0 / 0.6), 0 4px 8px rgb(0 0 0 / 0.4);
		--bw-shadow-xl: 0 24px 56px rgb(0 0 0 / 0.7);
	}
}

/*
 * Reduced motion.
 *
 * Durations are zeroed at the token level rather than by blanket-disabling
 * transitions, so a component that reads --bw-duration-* gets the right
 * behaviour without knowing the preference exists.
 */
@media (prefers-reduced-motion: reduce) {
	:root {
		--bw-duration-fast: 1ms;
		--bw-duration-base: 1ms;
		--bw-duration-slow: 1ms;
	}
}