/* ==========================================================================
   DESIGN TOKENS — Crédito Finca Raíz
   Centralized design variables. New code should use these tokens.
   Existing literal values (colors, radii) still work; migration is gradual.
   ========================================================================== */

:root {
    /* --- Brand colors -------------------------------------------------- */
    --color-gold:             #d8ae5e;
    --color-gold-hover:       #ffd700;
    --color-gold-active:      #c49b4d;
    --color-gold-soft-bg:     #fdfbf6;
    --color-gold-soft-border: #e8d9b4;

    /* --- Neutrals ------------------------------------------------------ */
    --color-ink:              #0f172a; /* primary text / dark buttons */
    --color-ink-soft:         #1e293b; /* hover on dark buttons */
    --color-text-body:        #4b5563;
    --color-text-muted:       #6b7280;
    --color-text-faint:       #9ca3af;
    --color-border:           #e5e7eb;
    --color-border-soft:      #f3f4f6;
    --color-border-input:     #d1d5db;
    --color-bg-page:          #f9fafb;
    --color-bg-card:          #ffffff;
    --color-bg-subtle:        #f3f4f6;

    /* --- Semantic ------------------------------------------------------ */
    --color-success:          #15803d;
    --color-success-bg:       #dcfce7;
    --color-danger:           #dc2626;
    --color-danger-bg:        #fee2e2;
    --color-warning:          #b45309;
    --color-warning-bg:       #fef3c7;
    --color-info:             #1d4ed8;
    --color-info-bg:          #eff6ff;

    /* --- WhatsApp ------------------------------------------------------ */
    --color-whatsapp:         #25D366;
    --color-whatsapp-hover:   #1da851;

    /* --- Radii --------------------------------------------------------- */
    --radius-sm:              6px;
    --radius-md:              10px;
    --radius-lg:              12px;
    --radius-xl:              16px;
    --radius-pill:            9999px;

    /* --- Shadows ------------------------------------------------------- */
    --shadow-xs:              0 1px 3px rgba(0, 0, 0, 0.04);
    --shadow-sm:              0 2px 6px rgba(0, 0, 0, 0.06);
    --shadow-md:              0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg:              0 10px 25px rgba(0, 0, 0, 0.12);
    --shadow-gold:            0 4px 14px rgba(216, 174, 94, 0.30);
    --shadow-whatsapp:        0 4px 14px rgba(37, 211, 102, 0.30);

    /* --- Typography ---------------------------------------------------- */
    --font-sans:              'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --font-mono:              ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

    /* --- Spacing scale ------------------------------------------------- */
    --space-xs:               0.25rem; /*  4px */
    --space-sm:               0.5rem;  /*  8px */
    --space-md:               1rem;    /* 16px */
    --space-lg:               1.5rem;  /* 24px */
    --space-xl:               2rem;    /* 32px */
    --space-2xl:              3rem;    /* 48px */

    /* --- Z-index scale ------------------------------------------------- */
    --z-header:               1000;
    --z-dropdown:             2000;
    --z-modal-backdrop:       9998;
    --z-modal:                9999;
    --z-loader:               10000;
    --z-toast:                99999;

    /* --- Transitions --------------------------------------------------- */
    --transition-fast:        0.15s ease;
    --transition-base:        0.2s ease;
    --transition-slow:        0.3s ease;
}