/* ============================================================
   Team Priceless McLaren · Design tokens
   Single source of truth for colors, radii, shadows, sizing.
   Loaded first; every screen and every component reads from here.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');

:root {
    /* ---------- brand ---------- */
    --papaya:            #FF8000;
    --papaya-hi:         #ffa64d;   /* highlight for orange media gradients */
    --papaya-hover:      #ff9426;
    --papaya-deep:       #b35800;   /* used inside orange media gradients */
    --papaya-rgb:        255, 128, 0;   /* para rgba(var(--papaya-rgb), 0.x) */

    /* ---------- surface tints derivadas del papaya ---------- */
    --papaya-tint-04:    rgba(255, 128, 0, 0.04);
    --papaya-tint-10:    rgba(255, 128, 0, 0.10);
    --papaya-tint-12:    rgba(255, 128, 0, 0.12);
    --papaya-glow:       rgba(255, 128, 0, 0.35);

    /* ---------- surfaces ---------- */
    --bg-page:           #000000;   /* page / behind sheet */
    --bg-neutro:         #0B0B0C;
    --bg-sheet:          #131313;   /* main app surface */
    --bg-card:           #1a1a1a;   /* card surface */
    --bg-card-strong:    #202020;   /* elevated pill / chip inside a card */

    /* ---------- lines & subtle fills ---------- */
    --border-hairline:      rgba(255, 255, 255, 0.08);
    --border-btn-ghost:     rgba(255, 255, 255, 0.28);   /* Ver Recibos / Ver Ranking */
    --border-btn-ghost-hi:  rgba(255, 255, 255, 0.42);   /* hover */
    --fill-soft:            rgba(255, 255, 255, 0.06);
    --fill-soft-hover:      rgba(255, 255, 255, 0.12);
    --fill-active:          rgba(255, 255, 255, 0.20);

    /* ---------- text ---------- */
    --text-primary:      #ffffff;
    --text-secondary:    #9CA1A7;
    --text-label:        rgba(255, 255, 255, 0.55);
    --text-on-papaya:    #000000;   /* body copy sitting on papaya fill */

    /* ---------- status ---------- */
    --status-approved:   #2ecc71;
    --status-review:     #f0a92b;
    --status-rejected:   #ef4b4b;
    --status-approved-ink: #062713;
    --status-review-ink:   #2a1c00;
    --status-rejected-ink: #2b0606;
    --notification-dot:  #ff3b30;   /* rewards uses red; brand uses papaya — pick per screen */

    /* ---------- radii ---------- */
    --radius-sheet:      24px;
    --radius-card:       12px;
    --radius-btn:        14px;
    --radius-close:      10px;
    --radius-pill:       999px;

    /* ---------- shadows ---------- */
    --shadow-sheet:      0 -12px 40px rgba(0, 0, 0, 0.6);
    --shadow-sheet-float:0 24px 60px rgba(0, 0, 0, 0.7); /* floating modal variant */
    --shadow-fab:        0 8px 24px rgba(255, 128, 0, 0.35);

    /* ---------- layout ---------- */
    --max-viewport:      430px;     /* mobile-first canvas width */
    --sheet-desktop-w:   390px;     /* desktop preview width */
    --tabbar-height:     88px;

    /* ---------- typography ---------- */
    --font-body:         "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-display:      "Outfit", system-ui, -apple-system, sans-serif;

    /* ---------- motion ---------- */
    --ease-quick:        0.15s ease;
    --ease-press:        0.05s ease;
}