/* ============================================================
 * Frugivore 2025 redesign — DESKTOP design tokens (single source).
 *
 * Loaded ONLY from templates/desktop/base.html. The mobile site
 * has its own dedicated tokens file at
 *   static/mobile-website/css/common/redesign-tokens.css
 *
 * SCOPE: this file is the ONE place to change a brand colour, a
 * gradient recipe, a radius, a shadow, or a layout dimension for
 * the desktop surface. Page-specific files may NARROW a token by
 * re-declaring on a more specific selector, but they must not
 * redefine palette literals.
 * ============================================================ */

:root {
    /* ---- Brand palette ---- */
    --rd-cream:        #f5f1e8;
    --rd-cream-2:      #ece5d2;
    --rd-cream-3:      #faf6ec;
    --rd-cream-4:      #fffdf7;
    --rd-green:        #1f3d2e;
    --rd-green-2:      #2c5141;
    --rd-green-3:      #133023;
    --rd-orange:       #f08a3a;
    --rd-orange-2:     #e6712b;
    --rd-orange-3:     #c95613;
    --rd-orange-soft:  #fdebd6;
    --rd-gold:         #d4a64b;
    --rd-gold-2:       #e6c069;
    --rd-ink:          #1a2521;
    --rd-muted:        #6b7568;
    --rd-text-inv:     #f5f1e8;
    --rd-danger:       #c0392b;
    --rd-danger-soft:  #fde7e3;
    --rd-info:         #2f6f8f;
    --rd-success:      #2d7a3f;

    /* ---- Surfaces ---- */
    --rd-card-bg:   #ffffff;
    --rd-border:    #e3ddc9;
    --rd-border-2:  #ece5d3;

    /* ---- Radii ---- */
    --rd-radius-xl:   28px;
    --rd-radius-lg:   20px;
    --rd-radius-md:   16px;
    --rd-radius-sm:   10px;
    --rd-radius-pill: 999px;

    /* ---- Shadows ---- */
    --rd-shadow-sm: 0 2px 8px rgba(20, 40, 30, 0.04);
    --rd-shadow:    0 6px 16px rgba(20, 40, 30, 0.06);
    --rd-shadow-md: 0 10px 24px rgba(20, 40, 30, 0.10);
    --rd-shadow-lg: 0 14px 32px rgba(20, 40, 30, 0.14);

    /* ---- Recurring gradients (use these instead of inline
            `linear-gradient(...)` literals — DRY) ---- */
    --rd-grad-green:  linear-gradient(135deg, var(--rd-green)  0%, var(--rd-green-2)  100%);
    --rd-grad-orange: linear-gradient(135deg, var(--rd-orange) 0%, var(--rd-orange-2) 100%);
    --rd-grad-gold:   linear-gradient(135deg, var(--rd-gold)   0%, var(--rd-gold-2)   100%);
    --rd-grad-warm:   linear-gradient(135deg, var(--rd-orange) 0%, var(--rd-gold)     100%);
    --rd-grad-hero:   linear-gradient(135deg, var(--rd-green)  0%, var(--rd-green-2) 60%, var(--rd-green-3) 100%);
    --rd-grad-paper:  linear-gradient(180deg, #ffffff 0%, var(--rd-cream-3) 110%);

    /* ---- Recurring brand glows (button shadows etc.) ---- */
    --rd-glow-green:  0 14px 28px rgba(31, 61, 46, 0.22);
    --rd-glow-orange: 0 14px 28px rgba(240, 138, 58, 0.30);
    --rd-glow-gold:   0 12px 24px rgba(212, 166, 75, 0.30);
    --rd-glow-danger: 0 12px 24px rgba(192, 57, 43, 0.26);

    /* ---- Typography ---- */
    --rd-serif:  "Playfair Display", Georgia, "Times New Roman", serif;
    --rd-sans:   "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --rd-italic: 'Georgia', 'Times New Roman', serif;

    /* ---- Motion ---- */
    --rd-easing: cubic-bezier(0.2, 0.8, 0.2, 1);
}