/**
 * tokens.css — Klasificados Design System: Single Source of Truth
 * =============================================================================
 * This is the ONE place brand tokens are declared. Every other stylesheet and
 * template consumes these via var(); none should redeclare them.
 *
 * Load order requirement: tokens.css MUST load FIRST, before main.css and any
 * component stylesheet, on every page. base.html does this for all SSR
 * templates; each static landing/*.html loads it explicitly before main.css.
 *
 * Consolidated from (previously duplicated across):
 *   - landing/static/css/main.css      (:root palette, fonts, frame)
 *   - src/clasificados/templates/base.html (inline :root — greys, deal, card, whatsapp)
 *   - landing/static/css/listing-cards.css (:root — deal, trust, card, whatsapp)
 *
 * Intentionally NOT centralized here (scoped overrides, leave in place):
 *   - boriken.css   Boriken-mode theme palette (class-scoped override)
 *   - vdp-detail.css --vdp-headline-size (component-local, responsive)
 *   - responsive.css --gallery-gap per-breakpoint overrides
 * =============================================================================
 */

:root {
    /* -------------------------------------------------------------------------
       WARM GALLERY PALETTE — neutrals
       ------------------------------------------------------------------------- */
    --white: #FFFEFA;
    --gallery-white: #F8F6F1;
    --warm-white: #F5F2EB;
    --paper: #F0EDE5;
    --black: #1A1A1A;

    /* Greys (900/600/400/200 from main.css; 700/500/300 were in base.html) */
    --gray-900: #2D2D2D;
    --gray-700: #4B4B4B;
    --gray-600: #6B6B6B;
    --gray-500: #8B8B8B;
    --gray-400: #A3A3A3;
    --gray-300: #C4C4C4;
    --gray-200: #E5E2DB;

    /* -------------------------------------------------------------------------
       BRAND ACCENTS
       ------------------------------------------------------------------------- */
    --red-accent: #C4392C;
    --red-hover: #A82D22;
    --brass: #8B7355;
    --leather: #654321;

    /* -------------------------------------------------------------------------
       TYPOGRAPHY
       ------------------------------------------------------------------------- */
    --font-display: 'Fraunces', Georgia, serif;
    --font-headline: var(--font-display);
    --font-body: 'DM Sans', -apple-system, sans-serif;

    /* -------------------------------------------------------------------------
       LAYOUT / FRAME
       ------------------------------------------------------------------------- */
    --frame-width: 1px;
    --gallery-gap: clamp(24px, 4vw, 48px);

    /* -------------------------------------------------------------------------
       DEAL BADGE SYSTEM (price-signal chips on listing cards)
       ------------------------------------------------------------------------- */
    --deal-exceptional: #15803d;    /* green-700 — gold-star deals */
    --deal-exceptional-bg: #dcfce7;
    --deal-great: #22c55e;          /* green-500 */
    --deal-great-bg: #f0fdf4;
    --deal-fair: #6b7280;           /* gray-500 */
    --deal-fair-bg: #f3f4f6;
    --deal-above: #eab308;          /* yellow-500 */
    --deal-above-bg: #fef9c3;
    --deal-overpriced: #ef4444;     /* red-500 */
    --deal-overpriced-bg: #fee2e2;

    /* -------------------------------------------------------------------------
       TRUST BADGE SYSTEM (seller signals)
       ------------------------------------------------------------------------- */
    --trust-verified: var(--brass, #8B7355);
    --trust-verified-bg: rgba(139, 115, 85, 0.15);
    --trust-active: #8b5cf6;        /* purple-500 */
    --trust-active-bg: #ede9fe;
    --trust-new: #f59e0b;           /* amber-500 */
    --trust-new-bg: #fef3c7;

    /* -------------------------------------------------------------------------
       CARD STRUCTURE
       ------------------------------------------------------------------------- */
    --card-bg: #ffffff;
    --card-border: #e5e7eb;
    --card-shadow: 0 1px 3px rgba(0,0,0,0.08);
    --card-shadow-hover: 0 8px 24px rgba(0,0,0,0.12);
    --card-radius: 12px;
    --card-radius-sm: 8px;
    --card-padding: 16px;
    --card-gap: 12px;

    /* -------------------------------------------------------------------------
       WHATSAPP BRAND (contact CTAs)
       ------------------------------------------------------------------------- */
    --whatsapp-green: #25D366;
    --whatsapp-hover: #1da851;
}

/* =============================================================================
   BREAKPOINT SCALE — documentation only
   -----------------------------------------------------------------------------
   CSS custom properties CANNOT be used inside @media queries, so these cannot
   be real vars. They are documented here as the canonical constants so every
   stylesheet uses the SAME magic numbers. When adding a media query, pick from
   this scale; do not invent a new breakpoint.

     --bp-desktop  : 1024px   /* tablet landscape / small desktop            */
     --bp-wide-tab :  850px   /* large tablet                                */
     --bp-tablet   :  768px   /* tablet portrait — primary mobile boundary   */
     --bp-phablet  :  600px   /* large phone                                 */
     --bp-mobile   :  480px   /* phone                                       */
     --bp-small    :  420px   /* small phone                                 */
     --bp-tiny     :  340px   /* smallest supported viewport                 */
   ============================================================================= */