/* ============================================================================
   ThuducReal design tokens
   ----------------------------------------------------------------------------
   Loaded before every other stylesheet. Nothing in here styles an element - it
   only names values, so a colour can be changed in one place instead of being
   hunted through styles.css, site.css, style.css, site-project.css and six
   "-enhancements" files.

   The rule that makes the site readable at a glance:

       red   = mua bán (sale)
       blue  = cho thuê (rent)
       green = đã xác thực pháp lý - and nothing else

   The search buttons already implied this ("Tìm Mua" red, "Tìm Thuê" blue);
   these tokens make it hold for prices, badges, filters and buttons too.

   Values replaced by this file (previously hard-coded, and inconsistent):
     #bf1e2e, #e01f27          -> --tdr-sale
     #0d6efd, #195d8b, #007bff -> --tdr-rent
     #22c55e                   -> --tdr-verified
     #0068ff                   -> --tdr-zalo (brand colour, never reused)
   ========================================================================== */

:root {
    /* ---- Brand / semantic colour ------------------------------------- */
    --tdr-sale: #B3182B;
    --tdr-sale-hover: #8F1322;
    --tdr-sale-soft: #FBEBED;

    --tdr-rent: #1B5E96;
    --tdr-rent-hover: #164B78;
    --tdr-rent-soft: #E8F0F7;

    --tdr-verified: #0F7355;
    --tdr-verified-soft: #E6F2EE;

    --tdr-warn: #B4680B;
    --tdr-warn-soft: #FBF0E0;

    /* Zalo's own brand blue. Functional, not part of the palette. */
    --tdr-zalo: #0068FF;
    --tdr-zalo-hover: #0056D6;

    /* ---- Neutrals (blue-biased, so they sit with the accents) --------- */
    --tdr-ink: #0E1720;
    --tdr-ink-2: #33414F;
    --tdr-muted: #6E7C8C;
    --tdr-hair: #DDE3E9;
    --tdr-hair-soft: #EAEEF2;
    --tdr-paper: #F4F6F8;
    --tdr-surface: #FFFFFF;
    --tdr-surface-2: #FAFBFC;

    /* ---- Type -------------------------------------------------------- */
    --tdr-font-body: "Be Vietnam Pro", "Segoe UI", system-ui, -apple-system, sans-serif;
    --tdr-font-display: "Bricolage Grotesque", "Be Vietnam Pro", "Segoe UI", system-ui, sans-serif;
    --tdr-font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

    /* A fixed scale. Guards against the Index.cshtml h1 bug, where
       clamp(1.8rem, 5vw, 1.7rem) had a floor above its ceiling and so never
       scaled at all. */
    --tdr-text-xs: 0.75rem;
    --tdr-text-sm: 0.85rem;
    --tdr-text-base: 1rem;
    --tdr-text-lg: 1.125rem;
    --tdr-text-xl: 1.375rem;
    --tdr-text-2xl: clamp(1.4rem, 3.2vw, 1.85rem);
    --tdr-text-3xl: clamp(1.75rem, 4.5vw, 2.75rem);

    --tdr-leading-tight: 1.2;
    --tdr-leading-body: 1.6;

    /* ---- Spacing ----------------------------------------------------- */
    --tdr-sp-1: 4px;
    --tdr-sp-2: 8px;
    --tdr-sp-3: 12px;
    --tdr-sp-4: 16px;
    --tdr-sp-5: 24px;
    --tdr-sp-6: 40px;

    /* ---- Radius: sm badges/inputs, md cards, lg panels --------------- */
    --tdr-radius-sm: 6px;
    --tdr-radius-md: 10px;
    --tdr-radius-lg: 16px;
    --tdr-radius-pill: 999px;

    /* ---- Elevation ---------------------------------------------------
       A card at rest uses its border, not a shadow. Shadows are reserved
       for things that genuinely float: the contact dock, dropdowns, modals. */
    --tdr-shadow-1: 0 1px 2px rgba(14, 23, 32, .05), 0 2px 8px rgba(14, 23, 32, .05);
    --tdr-shadow-2: 0 2px 4px rgba(14, 23, 32, .06), 0 12px 32px rgba(14, 23, 32, .09);

    /* ---- Motion ------------------------------------------------------ */
    --tdr-ease: cubic-bezier(.4, 0, .2, 1);
    --tdr-dur-fast: .15s;
    --tdr-dur: .25s;

    /* ---- Media -------------------------------------------------------
       One photo ratio everywhere. Cards previously mixed 800x600 (house)
       with an enforced 4/3 (land), so grids came out ragged. */
    --tdr-photo-ratio: 4 / 3;

    /* ---- Layering ---------------------------------------------------- */
    --tdr-z-dock: 1030;
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --tdr-dur-fast: 0s;
        --tdr-dur: 0s;
    }
}