/*
 * tokens.css — Design token aliases + non-color tokens
 *
 * RULE: This file contains zero hex color values.
 * All colors come from GP Customizer → Global Colors → CSS vars.
 * All font vars come from inc/design-system.php → PHP bridge.
 *
 * This file's only job:
 *   1. Alias GP color vars to semantic names used in our components
 *   2. Define spacing, radius, shadow, and transition tokens GP doesn't provide
 */

:root {
    /* ── Color Aliases (GP vars → semantic names) ──────
       Source: GP Customizer → Global Colors (6-color palette).
       Change colors there — these aliases update automatically. */

    --color-text:         var(--black);
    --color-text-muted:   var(--muted);
    --color-text-faint:   var(--grey-mid);
    --color-bg:           var(--white);
    --color-bg-alt:       var(--grey-light);
    --color-bg-dark:      var(--navy);
    --color-accent:       var(--cyan);
    --color-primary:      var(--navy);
    --color-border:       var(--grey-light);
    --color-surface:      var(--white);

    /* Property status colors — from the 6-color palette */
    --color-status-for-sale:    var(--cyan);
    --color-status-for-lease:   var(--navy);
    --color-status-sold:        var(--grey-mid);
    --color-status-leased:      var(--grey-mid);
    --color-status-under-offer: var(--cyan);

    /* ── Font Aliases ───────────────────────────────────
       Source: inc/design-system.php reads GP Typography settings
       and outputs --font-body / --font-heading to <head>.
       --font-mono has no GP equivalent; defined in design-system.php. */

    /* Use var(--font-body) and var(--font-heading) directly in component CSS. */

    /* ── Spacing ─────────────────────────────────────────
       GP has no spacing token system. Defined here. */

    --space-xs:   0.25rem;
    --space-sm:   0.5rem;
    --space-md:   1rem;
    --space-lg:   1.5rem;
    --space-xl:   2rem;
    --space-2xl:  3rem;
    --space-3xl:  5rem;

    /* ── Type Scale ─────────────────────────────────────
       GP controls element font sizes via Typography Manager.
       These are for custom elements GP doesn't target (cards, badges, etc.) */

    --text-xs:    0.75rem;
    --text-sm:    0.875rem;
    --text-base:  1rem;
    --text-lg:    1.125rem;
    --text-xl:    1.25rem;
    --text-2xl:   1.5rem;
    --text-3xl:   2rem;
    --text-4xl:   2.75rem;

    /* ── Border Radius ───────────────────────────────── */
    --radius-sm:  4px;
    --radius-md:  8px;
    --radius-lg:  12px;
    --radius-xl:  20px;
    --radius-full: 9999px;

    /* ── Shadows ─────────────────────────────────────── */
    --shadow-sm:            0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-md:            0 4px 16px rgba(0, 0, 0, 0.10);
    --shadow-lg:            0 8px 32px rgba(0, 0, 0, 0.14);
    --shadow-property-card: 0 2px 12px rgba(0, 0, 0, 0.10);

    /* ── Transitions ────────────────────────────────── */
    --transition-base: 200ms ease;
    --transition-slow: 400ms ease;
}