/* ============================================================================
   design-tokens.css: the Official design's VALUE TIER.

   The ONLY place raw values live for this design: the palette, and (later) the
   spacing / type / radius / shadow scales. design-theme.css themes the fwk-*
   components by REFERENCING these tokens; it never hard-codes a hex or px.

   Re-tone the whole design by editing the values here. A dark / alternate theme
   is a [data-theme="..."] block overriding these SAME token names (never a second
   hex in the theme file).

   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). Child designs (australian) re-tint these
            SAME token names in their own overlay, loaded after this pair.
   ============================================================================ */

/* 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. */

:root {
    /* Palette */
    --fwre-green: #0CAB9B;
    /* 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-green-alpha: rgba(12, 171, 155, .075);
    --fwre-black: #323232;
    --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-red: #FF4C00;
    --fwre-white: #fff;
    --fwre-sand: #e8b779;         /* live mod_fwre_latest price accent (modules/mod_fwre_latest/assets/css/styles.css:7) */

    /* 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 (≈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);

    /* 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) */
    --fwre-media-canvas: #111;        /* dark viewer canvas (360 tour) */

    /* Interaction accents (product skin) */
    --fwre-green-hover: #0A8F82;   /* price / link / primary-button hover */
    --fwre-hover: var(--fwre-grey-light);   /* subtle row/control hover wash */

    /* 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;

    /* Effects */
    --fwre-shadow-small: 0 4px 13px rgba(30, 35, 66, .11);
    --fwre-count-overlay: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
    /* Elevation scale: the live agency template carries ONE shadow recipe
       (fwre-design-styles.css --fwre-shadow-small); the tiers converge on it. */
    --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);

    /* 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 */

    /* Type */
    --fwre-font: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 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;
}