/* ============================================================================
   design-tokens.css: the Official design's VALUE TIER, in two tiers (designux
   knowledge/deployment/05-theming.md; docs/design-guide.md "Official tokens: two
   tiers, and how a child design re-tints them").

   PRIMITIVES hold the raw colours, under the names the design has always used.
   Every child design (us, australian, studiotest), the stand's demo-property.css,
   demo-pages.css, fwre-ms.css, demo-map.js and a customer's Styles-screen CSS set
   or read these names, so each keeps its value. This block is the only place in
   the official design where a colour value may appear.

   SEMANTIC roles (--fwre-color-*) point at a primitive with var(); they are the
   colour names the design's CSS reads. The scales (type, space, radius, shadow,
   motion, font) keep their raw values in the semantic block, as designux does:
   they are role- or step-named already.

   Both blocks sit on :root. A role is computed where it is declared, so a child
   design that sets a primitive on :root (loaded after this file) re-tints every
   role that points at it; setting a role re-tints that role only.

   Tokens reproduce the faithful live palette (ported from the retired agency
   overlay; see docs/showcase/design-roster.md for the 2026-07-12 roster rename).

   Cascade: fw-uikit (foundation) -> THIS (tokens) -> design-theme.css (themes
            fwk-* to these tokens) -> the owned skins (product, editor, gallery).
   ============================================================================ */

/* Fonts: Poppins is declared once, for every design, in the shared public/css/fwre-fonts.css (loaded
   from the framework manifest). It used to be an `@import url('https://fonts.googleapis.com/...')` right
   here, which made every page fetch the stylesheet and the font from Google, a remote asset a
   wordpress.org plugin may not serve, when the four TTFs were already in the package. */

/* ---- PRIMITIVES: raw colours ------------------------------------------------ */
:root {
    /* Brand */
    --fwre-green: #0CAB9B;
    --fwre-green-alpha: rgba(12, 171, 155, .075);
    --fwre-green-hover: #0A8F82;   /* price / link / primary-button hover */
    /* Two more steps of the brand hue for a chart's parts (the mortgage donut): a deep one and a
       light one, so the slices read as one palette with the neutral grey as the fourth. Mixed from
       --fwre-green rather than written out, so a child design that re-tints the brand (the us
       design's blue) gets its own steps: #076B61 and #86D5CD on the official green. */
    --fwre-green-deep: color-mix(in srgb, var(--fwre-green) 62%, #000);
    --fwre-green-light: color-mix(in srgb, var(--fwre-green) 50%, #fff);
    --fwre-coral: #D2564C;         /* the search panel's secondary button (was the search's own --fwre-s-accent-2) */
    /* Dropdown design-caption color: the palette red (--fwre-red) BY VALUE, deliberately not
       a var() chain, so captions stay one constant color under every child overlay. Red, not
       the accent green: the ACTIVE dropdown link already wears the design accent
       (green/blue), and a green caption merged with it (owner call, 2026-07-15). */
    --fwre-menu-caption: #FF4C00;
    --fwre-red: #FF4C00;
    --fwre-sand: #e8b779;          /* live mod_fwre_latest price accent (modules/mod_fwre_latest/assets/css/styles.css:7) */

    /* Neutrals */
    --fwre-black: #323232;
    --fwre-white: #fff;
    --fwre-grey: #ADADAD;
    --fwre-grey-border: #E1E1E1;
    --fwre-grey-dark: #e6e6e6;
    --fwre-grey-dark-deep: #6e7683;
    --fwre-grey-light: #F3F3F3;
    --fwre-grey-agent: #a7a7a7;    /* Figma-true muted text grey (169_FW Real Estate, "9 of 69 properties" counter) */
    --fwre-hover: var(--fwre-grey-light);   /* subtle row/control hover wash */

    /* The search panel's light set (was the search module's own --fwre-s-* literals): a
       slightly greener ink and border family than the page neutrals, kept by value. */
    --fwre-pine: #13201b;              /* panel text */
    --fwre-sage: #5b6a64;              /* panel muted text, placeholders */
    --fwre-mist: #f1f5f3;              /* panel muted surface */
    --fwre-sage-line: #d9e0dc;         /* panel border */
    --fwre-sage-line-strong: #b9c4be;  /* panel control border */

    /* Featured-item accents */
    --fwre-featured-bg: #DBFFE8;
    --fwre-featured-soft: #B8E9C9;
    /* Darker green-grey for muted text / badges / icons on the light-green featured card:
       the plain --fwre-grey / --fwre-grey-agent wash out against that bg (about 6:1 on featured-bg). */
    --fwre-featured-ink: #51605a;
    /* Soft white pill behind type badges on the featured card (keeps the dark badge ink legible). */
    --fwre-featured-badge-bg: rgba(255, 255, 255, .55);
    /* The Featured pill's ink over the photo, on the featured green: a deep teal of the brand hue, so
       the pill reads apart from the primary buttons and the Available status (about 6:1). */
    --fwre-featured-flag-ink: #0B6B4F;

    /* Status + media surfaces */
    --fwre-status-default: #1e87f0;   /* uncolored status labels: LIVE UIkit label blue (owner 2026-07-22 revert; the r14 Figma cyan #1c98d6 is retired) */
    /* A listing tile's uncoloured status, by meaning (statuslabels tone): available green, pending the
       design's amber, closed (sold, let) muted grey. Each pair reads at 4.5:1 or better. */
    --fwre-status-available: #2e7d32;
    --fwre-status-available-ink: var(--fwre-white);
    --fwre-status-pending: var(--fwre-amber);
    --fwre-status-pending-ink: var(--fwre-black);
    --fwre-status-closed: var(--fwre-grey-dark-deep);
    --fwre-status-closed-ink: var(--fwre-white);
    --fwre-media-canvas: #111;        /* dark viewer canvas (360 tour) */
    --fwre-count-overlay: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));

    /* Site chrome (round 3, stand restructure): the Figma CTA amber + footer navy family
       (figma-tokens.json Figma-only palette: #ffbf00 x195, #404c6c x81, #252f4b x26). */
    --fwre-amber: #ffbf00;            /* Download CTA (menu button) */
    --fwre-on-amber: var(--fwre-black);
    --fwre-navy: #404c6c;             /* retained for dark-theme candidates; NOT the footer */
    --fwre-navy-deep: #252f4b;        /* retained for dark-theme candidates; NOT the footer */
    /* Footer: the official reference PNGs show a dark grey footer (#5A5A5A pixel-sampled,
       owner-confirmed 2026-07-14), reversing the earlier navy application. */
    --fwre-footer-bg: #5A5A5A;
    --fwre-footer-ink: #d9d9d9;       /* muted footer text on the grey */
    --fwre-footer-heading: var(--fwre-white);
    --fwre-footer-social: #6e6e6e;    /* round social button fill on the grey footer */

    /* Single-component inks and fills (7.2.0: moved here from the consumers, values kept) */
    --fwre-graphite: #666;                        /* select caret glyph, agent profile and review copy */
    --fwre-graphite-a50: rgba(102, 102, 102, .5); /* slideshow outer arrows */
    --fwre-graphite-a90: rgba(102, 102, 102, .9);
    --fwre-onyx: #333;                            /* detail-gallery arrow glyph */
    --fwre-ink: #323232;                          /* range-slider value labels: the official text ink, kept constant under a child's re-tint */
    --fwre-ash: #999;                           /* review dates, range-slider min/max text */
    --fwre-cloud: #e1e4e9;                        /* range-slider min/max chip */
    --fwre-silver: #d0d0d0;                       /* rating star, off */
    --fwre-charcoal: #1c1c1c;                     /* polaroid gallery title */
    --fwre-smoke: #5a5a5a;                        /* polaroid gallery meta */
    --fwre-gunmetal: #2a2f33;                     /* minimal search hero, under its photo */
    --fwre-jet: #000;                             /* video canvas, fancy gallery tile */
    --fwre-gold: #f5b301;                         /* favourite star, on */
    --fwre-gold-deep: #e0a800;                    /* favourite star, hover */
    --fwre-tangerine: #faa05a;                    /* rating stars */
    --fwre-brick: #e8453c;                        /* PDF brochure icon */
    --fwre-scarlet: #e53935;                      /* school rating: below average */
    --fwre-orange: #f57c00;                       /* school rating: average */
    --fwre-forest: #2e7d32;                       /* school rating: above average */

    /* Third-party brand marks (share buttons, agent contact buttons) */
    --fwre-share-grey: #6c757d;
    --fwre-whatsapp-green: #25D366;
    --fwre-facebook-blue: #334C8C;
    --fwre-linkedin-blue: #0077B5;
    --fwre-telegram-blue: #229ED9;
    --fwre-pinterest-red: #E60019;
    --fwre-zoom-blue: #2D8CFF;

    /* Applied-filter chips: the admin green family by value. A child design re-tints the chips
       through --fwa-green-* on :root, which the chip roles read first. */
    --fwre-leaf: #34A55D;
    --fwre-leaf-deep: #1A8842;
    --fwre-leaf-wash: #E6F7EC;
    --fwre-leaf-pale: #D8F1E1;

    /* Compare: the better and the worse value in a row (live's compare block, the owner's tints) */
    --fwre-moss-wash: #eaf4ec;
    --fwre-moss: #2e7d40;
    --fwre-blush: #fff3f0;
    --fwre-rust: #b84040;

    /* Translucent white and black: controls over photos, scrims and backdrops */
    --fwre-white-a02: rgba(255, 255, 255, .02);
    --fwre-white-a12: rgba(255, 255, 255, .12);
    --fwre-white-a15: rgba(255, 255, 255, .15);
    --fwre-white-a30: rgba(255, 255, 255, .3);
    --fwre-white-a35: rgba(255, 255, 255, .35);
    --fwre-white-a45: rgba(255, 255, 255, .45);
    --fwre-white-a50: rgba(255, 255, 255, .5);
    --fwre-white-a55: rgba(255, 255, 255, .55);
    --fwre-white-a60: rgba(255, 255, 255, .6);
    --fwre-white-a70: rgba(255, 255, 255, .7);
    --fwre-white-a80: rgba(255, 255, 255, .8);
    --fwre-white-a85: rgba(255, 255, 255, .85);
    --fwre-white-a95: rgba(255, 255, 255, .95);
    --fwre-jet-a0: rgba(0, 0, 0, 0);
    --fwre-jet-a05: rgba(0, 0, 0, .05);
    --fwre-jet-a38: rgba(0, 0, 0, .38);
    --fwre-jet-a45: rgba(0, 0, 0, .45);
    --fwre-jet-a50: rgba(0, 0, 0, .5);
    --fwre-jet-a55: rgba(0, 0, 0, .55);
    --fwre-jet-a60: rgba(0, 0, 0, .6);
    --fwre-jet-a62: rgba(0, 0, 0, .62);
    --fwre-jet-a66: rgba(0, 0, 0, .66);
    --fwre-jet-a80: rgba(0, 0, 0, .8);
    --fwre-jet-a82: rgba(0, 0, 0, .82);
    --fwre-jet-a85: rgba(0, 0, 0, .85);
    --fwre-jet-a90: rgba(0, 0, 0, .9);
    --fwre-midnight-a55: rgba(20, 22, 40, .55);   /* agent modal backdrop */
}

/* ---- SEMANTIC: roles the CSS reads, then the scales ------------------------- */
:root {
    /* Brand roles */
    --fwre-color-primary: var(--fwre-green);              /* links, prices, primary buttons, active states */
    --fwre-color-primary-hover: var(--fwre-green-hover);
    --fwre-color-primary-soft: var(--fwre-green-alpha);   /* tinted primary wash */
    --fwre-color-on-primary: var(--fwre-white);           /* text on a primary fill */
    --fwre-color-secondary: var(--fwre-coral);            /* the search panel's secondary button */
    --fwre-color-accent: var(--fwre-red);                 /* the danger/attention accent */
    --fwre-color-menu-caption: var(--fwre-menu-caption);  /* dropdown captions (a constant by design) */
    --fwre-color-cta: var(--fwre-amber);                  /* the Download CTA */
    --fwre-color-on-cta: var(--fwre-on-amber);
    --fwre-color-price-accent: var(--fwre-sand);          /* the Latest module's price accent */

    /* Text */
    --fwre-color-text: var(--fwre-black);
    --fwre-color-text-muted: var(--fwre-grey-dark-deep);  /* secondary text, meta */
    --fwre-color-text-subtle: var(--fwre-grey);           /* placeholders, disabled */
    --fwre-color-text-faint: var(--fwre-grey-agent);      /* counters, agent company */

    /* Surfaces and borders */
    --fwre-color-surface: var(--fwre-white);
    --fwre-color-surface-muted: var(--fwre-grey-light);
    --fwre-color-surface-hover: var(--fwre-hover);
    --fwre-color-border: var(--fwre-grey-border);
    --fwre-color-border-strong: var(--fwre-grey);

    /* The search panel (folded in from the search module's --fwre-s-* set, values kept) */
    --fwre-color-panel-surface: var(--fwre-white);
    --fwre-color-panel-surface-muted: var(--fwre-mist);
    --fwre-color-panel-border: var(--fwre-sage-line);
    --fwre-color-panel-border-strong: var(--fwre-sage-line-strong);
    --fwre-color-panel-text: var(--fwre-pine);
    --fwre-color-panel-text-muted: var(--fwre-sage);

    /* The featured card */
    --fwre-color-featured-surface: var(--fwre-featured-bg);
    --fwre-color-featured-soft: var(--fwre-featured-soft);
    --fwre-color-featured-text: var(--fwre-featured-ink);
    --fwre-color-featured-badge: var(--fwre-featured-badge-bg);
    /* the Featured pill on a featured card's photo (design review 20 Oct 2026, dsn-18) */
    --fwre-color-featured-flag: var(--fwre-featured-bg);
    --fwre-color-featured-flag-text: var(--fwre-featured-flag-ink);

    /* Status pills */
    --fwre-color-status-default: var(--fwre-status-default);
    --fwre-color-status-default-text: var(--fwre-white);
    --fwre-color-status-available: var(--fwre-status-available);
    --fwre-color-status-available-text: var(--fwre-status-available-ink);
    --fwre-color-status-pending: var(--fwre-status-pending);
    --fwre-color-status-pending-text: var(--fwre-status-pending-ink);
    --fwre-color-status-closed: var(--fwre-status-closed);
    --fwre-color-status-closed-text: var(--fwre-status-closed-ink);

    /* Compare: the better and the worse value in a row (the worse wash is also Remove's hover) */
    --fwre-color-better-surface: var(--fwre-moss-wash);
    --fwre-color-better-text: var(--fwre-moss);
    --fwre-color-worse-surface: var(--fwre-blush);
    --fwre-color-worse-text: var(--fwre-rust);

    /* Media and the site footer */
    --fwre-color-media-canvas: var(--fwre-media-canvas);  /* the 360 tour canvas */
    --fwre-color-footer-surface: var(--fwre-footer-bg);
    --fwre-color-footer-text: var(--fwre-footer-ink);
    --fwre-color-footer-heading: var(--fwre-footer-heading);
    --fwre-color-footer-social: var(--fwre-footer-social);
    --fwre-color-footer-divider: var(--fwre-white-a15);

    /* Inks on fills, and the dark bands */
    --fwre-color-on-accent: var(--fwre-white);            /* text on the accent (danger) fill */
    --fwre-color-on-media: var(--fwre-white);             /* text and glyphs over a photo or a dark scrim */
    --fwre-color-on-media-soft: var(--fwre-white-a85);    /* the card arrows' resting glyph */
    --fwre-color-on-brand: var(--fwre-white);             /* glyphs on a brand-coloured circle */
    --fwre-color-surface-strong: var(--fwre-grey-border); /* neutral chips, pressed fills */
    --fwre-color-tag-surface: var(--fwre-graphite);       /* a neutral badge under the framework's forced white text (5.7:1) */
    --fwre-color-surface-inverse: var(--fwre-footer-bg);  /* dark bands: home hero fallback, closing CTA */
    --fwre-color-on-inverse: var(--fwre-white);
    --fwre-color-border-inverse: var(--fwre-white-a55);   /* a ghost button's outline on a dark band */
    --fwre-color-tooltip-surface: var(--fwre-black);
    --fwre-color-tooltip-text: var(--fwre-white);
    --fwre-color-text-soft: var(--fwre-graphite);         /* agent profile and review copy */
    --fwre-color-text-hint: var(--fwre-ash);              /* review dates, range-slider min/max */
    --fwre-color-caret: var(--fwre-graphite);             /* the one select chevron (fwre-ms.css) */

    /* Media: photos, scrims, overlay controls */
    --fwre-color-media-fade: var(--fwre-count-overlay);   /* card photo bottom fade */
    --fwre-color-media-fade-stage: linear-gradient(var(--fwre-jet-a0), var(--fwre-jet-a85));
    --fwre-color-media-backdrop: var(--fwre-jet);         /* video tile canvas, fancy gallery tile */
    --fwre-color-media-scrim: var(--fwre-jet-a45);        /* card arrows, quick-view pill, watermark */
    --fwre-color-media-scrim-hover: var(--fwre-jet-a60);
    --fwre-color-media-scrim-strong: var(--fwre-jet-a55); /* photo counters, banner tabs */
    --fwre-color-media-outline: var(--fwre-white-a35);    /* quick-view pill border */
    --fwre-color-media-control: var(--fwre-white-a80);    /* detail-gallery arrow fill */
    --fwre-color-media-control-hover: var(--fwre-white-a95);
    --fwre-color-media-control-text: var(--fwre-onyx);
    --fwre-color-media-dot: var(--fwre-white-a45);
    --fwre-color-media-dot-border: var(--fwre-white-a70);
    --fwre-color-slide-arrow: var(--fwre-graphite-a50);
    --fwre-color-slide-arrow-hover: var(--fwre-graphite-a90);
    --fwre-color-hero-scrim: linear-gradient(180deg, var(--fwre-jet-a05) 40%, var(--fwre-jet-a38) 100%);
    --fwre-color-hero-fallback: var(--fwre-gunmetal);
    --fwre-color-latest-fade: linear-gradient(to top, var(--fwre-jet-a60), var(--fwre-jet-a0));
    /* the Latest horizontal and vertical cards: a deeper plate under three lines of white text on a photo */
    --fwre-color-latest-scrim: linear-gradient(to top, var(--fwre-jet-a85), var(--fwre-jet-a55) 60%, var(--fwre-jet-a0));
    --fwre-color-city-fade: linear-gradient(to top, var(--fwre-jet-a55), var(--fwre-jet-a0) 55%);
    --fwre-color-loading-veil: var(--fwre-white-a60);

    /* Modal backdrops */
    --fwre-color-backdrop: var(--fwre-jet-a50);           /* enquiry and iframe modals */
    --fwre-color-backdrop-agent: var(--fwre-midnight-a55);
    --fwre-color-backdrop-gallery: var(--fwre-jet-a62);
    --fwre-color-backdrop-fullscreen: var(--fwre-jet-a90);

    /* Gallery */
    --fwre-color-gallery-fade: linear-gradient(to top, var(--fwre-jet-a82), var(--fwre-jet-a0));
    --fwre-color-gallery-fade-overlay: linear-gradient(to top, var(--fwre-jet-a80), var(--fwre-jet-a0));
    --fwre-color-gallery-caption-fade: linear-gradient(transparent, var(--fwre-jet-a66));
    --fwre-color-gallery-button: var(--fwre-white-a12);
    --fwre-color-gallery-button-border: var(--fwre-white-a30);
    --fwre-color-gallery-dot: var(--fwre-white-a50);
    --fwre-color-placeholder-stripe: var(--fwre-white-a02);
    --fwre-color-polaroid-title: var(--fwre-charcoal);
    --fwre-color-polaroid-meta: var(--fwre-smoke);

    /* Features: favourites, ratings, brochure, schools, range slider, filter chips */
    --fwre-color-favorite: var(--fwre-gold);
    --fwre-color-favorite-hover: var(--fwre-gold-deep);
    --fwre-color-star: var(--fwre-tangerine);
    --fwre-color-star-off: var(--fwre-silver);
    --fwre-color-pdf: var(--fwre-brick);
    /* A chart's parts, in order (the mortgage donut and its legend): the brand hue in three steps,
       then a neutral. */
    --fwre-color-chart-1: var(--fwre-green);
    --fwre-color-chart-2: var(--fwre-green-deep);
    --fwre-color-chart-3: var(--fwre-green-light);
    --fwre-color-chart-4: var(--fwre-grey);
    --fwre-color-school-low: var(--fwre-scarlet);
    --fwre-color-school-mid: var(--fwre-orange);
    --fwre-color-school-good: var(--fwre-forest);
    --fwre-color-school-none: var(--fwre-grey-dark-deep);
    --fwre-color-school-text: var(--fwre-white);
    --fwre-color-range-limit: var(--fwre-cloud);
    --fwre-color-range-label: var(--fwre-ink);
    --fwre-color-chip-text: var(--fwa-green-hover, var(--fwre-leaf-deep));
    --fwre-color-chip-surface: var(--fwa-green-light, var(--fwre-leaf-wash));
    --fwre-color-chip-border: var(--fwa-green-pale, var(--fwre-leaf-pale));
    --fwre-color-chip-remove-hover: var(--fwa-green, var(--fwre-leaf));

    /* Brand marks */
    --fwre-color-brand-neutral: var(--fwre-share-grey);   /* copy link, SMS */
    --fwre-color-brand-whatsapp: var(--fwre-whatsapp-green);
    --fwre-color-brand-x: var(--fwre-jet);
    --fwre-color-brand-facebook: var(--fwre-facebook-blue);
    --fwre-color-brand-linkedin: var(--fwre-linkedin-blue);
    --fwre-color-brand-telegram: var(--fwre-telegram-blue);
    --fwre-color-brand-pinterest: var(--fwre-pinterest-red);
    --fwre-color-brand-zoom: var(--fwre-zoom-blue);

    /* Geometry: the official reference radius scale (pixel-measured from the owner's
       "FWRE official design" PNGs, 2026-07-14: cards/panels ~8px, controls ~4px,
       Download CTA ~10px, badges = pills). Supersedes the flat 3px live-agency floor. */
    --fwre-radius: 4px;        /* controls: inputs, buttons, selects */
    --fwre-radius-card: 8px;   /* cards, panels, stage, media frames */
    --fwre-radius-lg: 8px;     /* modal dialogs (converges on the card tier) */
    --fwre-radius-sm: 3px;     /* micro chips, thumbnails */
    --fwre-radius-cta: 10px;   /* the amber Download CTA pill */
    --fwre-radius-pill: 999px; /* status badges, open-today pill */

    /* Motion */
    --fwre-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --fwre-fast: 120ms;

    /* Elevation scale: the live agency template carries ONE shadow recipe
       (fwre-design-styles.css --fwre-shadow-small); the tiers converge on it, so
       --fwre-shadow-small, --fwre-shadow and --fwre-shadow-lg equal --fwre-shadow-sm. */
    --fwre-shadow-small: 0 4px 13px rgba(30, 35, 66, .11);
    --fwre-shadow-sm: 0 4px 13px rgba(30, 35, 66, .11);
    --fwre-shadow: 0 4px 13px rgba(30, 35, 66, .11);
    --fwre-shadow-lg: 0 4px 13px rgba(30, 35, 66, .11);
    /* Float tier (overlay round, 2026-07-22): elements floating OVER media/map need a
       markedly stronger lift than the flat-surface recipe above - the map browse card. */
    --fwre-shadow-float: 0 12px 32px rgba(30, 35, 66, .38), 0 2px 8px rgba(30, 35, 66, .22);
    /* Single-purpose recipes, moved here from their consumers (7.2.0, values kept). */
    --fwre-shadow-focus: 0 0 0 3px rgba(12, 171, 155, .15);       /* form-control focus ring */
    --fwre-shadow-modal: 0 12px 40px rgba(20, 22, 40, .25);       /* agent modal dialog */
    --fwre-shadow-header: 0 6px 14px rgba(0, 0, 0, .07);          /* the site header's fade */
    --fwre-shadow-hero-bar: 0 10px 30px rgba(0, 0, 0, .18);       /* minimal search bar over its hero */
    --fwre-shadow-polaroid: 0 6px 18px rgba(0, 0, 0, .28);
    --fwre-shadow-polaroid-hover: 0 10px 26px rgba(0, 0, 0, .36);
    --fwre-shadow-icon: 0 2px 8px rgba(0, 0, 0, .5);              /* drop-shadow() under the video play glyph */
    --fwre-shadow-text-hero: 0 2px 12px rgba(0, 0, 0, .45);
    --fwre-shadow-text-title: 0 1px 3px rgba(0, 0, 0, .45);
    --fwre-shadow-text-caption: 0 1px 2px rgba(0, 0, 0, .5);
    --fwre-shadow-text-latest: 0 1px 1px var(--fwre-black);

    /* Type */
    /* 'FWRE Inter' sits between the product face and the system stack, and carries the Cyrillic and
       Greek letters 'FWRE Poppins' has none of: the browser matches per GLYPH, so Latin is
       unaffected. Both names are namespaced because font-family is a global name and a host theme
       may declare its own Poppins (see public/css/fwre-fonts.css). */
    --fwre-font: 'FWRE Poppins', 'FWRE Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    /* UIkit's own base stack (fw-uikit html{}): the share pill's face, see product.css. */
    --fwre-font-system: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;

    /* Type scale: px, Figma-true (169_FW Real Estate text styles, usage-ranked; see
       docs/showcase/figma-token-decisions.md round 2). Sizes pair with line-heights. */
    --fwre-text-xs: 11px;     --fwre-lh-xs: 16px;     /* fine print, badges */
    --fwre-text-sm: 12px;     --fwre-lh-sm: 18px;     /* labels, meta (the #fwre base) */
    --fwre-text-base: 13px;   --fwre-lh-base: 20px;   /* body copy (Figma-dominant) */
    --fwre-text-md: 14px;     --fwre-lh-md: 21px;     /* buttons, emphasized body */
    --fwre-text-lg: 15px;     --fwre-lh-lg: 23px;
    --fwre-text-xl: 16px;     --fwre-lh-xl: 24px;     /* lead */
    --fwre-text-2xl: 18px;    --fwre-lh-2xl: 27px;    /* h3, module titles */
    --fwre-text-3xl: 20px;    --fwre-lh-3xl: 30px;    /* h2 */
    --fwre-text-4xl: 24px;    --fwre-lh-4xl: 36px;    /* modal titles, prices */
    --fwre-text-hero: 36px;   --fwre-lh-hero: 42px;   /* h1 */
    --fwre-weight-normal: 400;
    --fwre-weight-medium: 500;
    --fwre-weight-semibold: 600;
    --fwre-weight-bold: 700;

    /* Spacing scale: the design's own recurring steps (near-4px grid), value-faithful
       (numbered by px so nothing is misrepresented). Figma spacing normalization is
       PENDING (file has no auto-layout + API budget lockout): see decisions round 2.
       rem literals in consumers convert to the nearest step (max shift 0.8px). */
    --fwre-space-2: 2px;
    --fwre-space-3: 3px;
    --fwre-space-4: 4px;
    --fwre-space-5: 5px;
    --fwre-space-6: 6px;
    --fwre-space-8: 8px;
    --fwre-space-10: 10px;
    --fwre-space-12: 12px;
    --fwre-space-14: 14px;
    --fwre-space-15: 15px;
    --fwre-space-16: 16px;
    --fwre-space-18: 18px;
    --fwre-space-20: 20px;
    --fwre-space-26: 26px;
    --fwre-space-28: 28px;
    --fwre-space-30: 30px;
    --fwre-space-40: 40px;
}