/* =========================
   BRAZILIAN REWARDS DESIGN SYSTEM
   Tema unificado para todas as páginas
   ========================= */

/* =========================
   THEME 1 — NATURE (Verde) [Padrão]
   ========================= */
.theme-nature {
    /* Core brand colors */
    --bg: #95c11f;
    --blue: #164272;
    --yellow: #ffde14;
    --white: #ffffff;

    /* Extended palette */
    --green: #95c11f;
    --green-dark: #7a9d1a;
    --green-light: #a8cc3a;
    --blue-dark: #0f2d4f;
    --blue-light: #2563a8;
    --gold: #f4a636;
    --gold-accent: #e8960e;
    --accent: var(--blue);
    --accent-2: var(--gold);

    /* Typography */
    --text: #0f1419;
    --text-soft: #374151;
    --muted: #6b7280;
    --muted-2: #9ca3af;

    /* Surfaces */
    --panel: #ffffff;
    --panel-soft: #f8fdf3;
    --panel-accent: #f0f7e8;
    --bg-soft: #f3f9ed;
    --line: rgba(15, 20, 25, .08);
    --line-strong: rgba(15, 20, 25, .16);

    /* On colors */
    --on-accent: #ffffff;
    --on-yellow: #1a1100;
    --on-green: #ffffff;
    --on-gold: #1a0f00;

    /* States */
    --success: #059669;
    --warning: #d97706;
    --danger: #dc2626;
    --info: var(--blue-light);
    --up: #059669;
    --down: #dc2626;

    /* Design tokens */
    --radius: 16px;
    --radius-sm: 8px;
    --radius-lg: 24px;
    --shadow: 0 10px 25px rgba(15, 20, 25, .08), 0 4px 10px rgba(15, 20, 25, .04);
    --shadow-elev: 0 2px 6px rgba(0, 0, 0, .2);
    --ring: rgba(22, 66, 114, .25);
    --line-card: rgba(255, 255, 255, .12);
    --overlay-0: rgba(255, 255, 255, .02);
    --overlay-1: rgba(255, 255, 255, .08);
    --overlay-2: rgba(255, 255, 255, .12);
    --overlay-3: rgba(255, 255, 255, .18);
    --drop-shadow-logo: drop-shadow(0 2px 8px rgba(0,0,0,.25));
    --shadow-text: rgba(0,0,0,.25);
    --button-affirm-shadow: 0 8px 20px rgba(149, 193, 31, .35), inset 0 0 0 1px rgba(255,255,255,.06);
    --up-10: rgba(5, 150, 105, .1);
    --down-10: rgba(220, 38, 38, .1);
    --success-10: rgba(5, 150, 105, .1);
    --danger-10: rgba(220, 38, 38, .1);
    --info-10: rgba(37, 99, 235, .1);
    --whatsapp: #25d366;
    --whatsapp-10: rgba(37, 211, 102, .1);
    --green-10: rgba(149, 193, 31, .1);
    --green-20: rgba(149, 193, 31, .2);
    --white-06: rgba(255, 255, 255, .06);

    /* Gradients */
    --bg-grad: radial-gradient(80% 50% at 50% 0%, #a8cc3a 0%, var(--bg) 60%);
    --button-primary-grad: linear-gradient(135deg, var(--blue-light), var(--blue-dark));
    --button-affirm-grad: linear-gradient(135deg, var(--green-light), var(--green-dark));
    --button-accent-grad: linear-gradient(135deg, var(--yellow), var(--gold));
    --card-grad: linear-gradient(135deg, var(--blue-dark), var(--blue));
}

/* =========================
   THEME 2 — OCEAN (Azul)
   ========================= */
.theme-ocean {
    /* Core brand colors */
    --bg: #164272;
    --blue: #164272;
    --yellow: #ffde14;
    --white: #ffffff;

    /* Extended palette */
    --green: #22c55e;
    --green-dark: #16a34a;
    --green-light: #4ade80;
    --blue-dark: #0c1e35;
    --blue-light: #3b82f6;
    --gold: #fbbf24;
    --gold-accent: #f59e0b;
    --accent: var(--green);
    --accent-2: var(--gold);

    /* Typography */
    --text: #ffffff;
    --text-soft: #e2e8f0;
    --muted: #cbd5e1;
    --muted-2: #94a3b8;

    /* Surfaces */
    --panel: rgba(255, 255, 255, 0.1);
    --panel-soft: rgba(255, 255, 255, 0.05);
    --panel-accent: rgba(34, 197, 94, 0.1);
    --bg-soft: rgba(255, 255, 255, 0.08);
    --line: rgba(255, 255, 255, .12);
    --line-strong: rgba(255, 255, 255, .2);

    /* On colors */
    --on-accent: #ffffff;
    --on-yellow: #1a1100;
    --on-green: #ffffff;
    --on-gold: #1a0f00;

    /* States */
    --success: #22c55e;
    --warning: #fbbf24;
    --danger: #ef4444;
    --info: var(--blue-light);
    --up: #22c55e;
    --down: #ef4444;

    /* Design tokens */
    --radius: 16px;
    --radius-sm: 8px;
    --radius-lg: 24px;
    --shadow: 0 20px 40px rgba(0, 0, 0, .4), 0 8px 16px rgba(0, 0, 0, .2);
    --shadow-elev: 0 2px 6px rgba(0, 0, 0, .35);
    --ring: rgba(34, 197, 94, .25);
    --line-card: rgba(255, 255, 255, .12);
    --overlay-0: rgba(255, 255, 255, .02);
    --overlay-1: rgba(255, 255, 255, .08);
    --overlay-2: rgba(255, 255, 255, .12);
    --overlay-3: rgba(255, 255, 255, .18);
    --drop-shadow-logo: drop-shadow(0 2px 8px rgba(0,0,0,.45));
    --shadow-text: rgba(0,0,0,.35);
    --button-affirm-shadow: 0 10px 24px rgba(59, 130, 246, .35), inset 0 0 0 1px rgba(255,255,255,.06);
    --up-10: rgba(34, 197, 94, .1);
    --down-10: rgba(239, 68, 68, .1);
    --success-10: rgba(34, 197, 94, .1);
    --danger-10: rgba(239, 68, 68, .1);
    --info-10: rgba(59, 130, 246, .1);
    --whatsapp: #25d366;
    --whatsapp-10: rgba(37, 211, 102, .1);
    --green-10: rgba(34, 197, 94, .1);
    --green-20: rgba(34, 197, 94, .2);
    --white-06: rgba(255, 255, 255, .06);

    /* Gradients */
    --bg-grad: linear-gradient(135deg, #1e3a8a 0%, var(--bg) 60%, #0c1e35 100%);
    --button-primary-grad: linear-gradient(135deg, var(--green-light), var(--green-dark));
    --button-affirm-grad: linear-gradient(135deg, var(--blue-light), var(--blue-dark));
    --button-accent-grad: linear-gradient(135deg, var(--yellow), var(--gold));
    --card-grad: linear-gradient(135deg, var(--green-dark), var(--green));
}

/* =========================
   THEME 3 — SUNSET (Dourado)
   ========================= */
.theme-sunset {
    /* Core brand colors */
    --bg: #ffde14;
    --blue: #164272;
    --yellow: #ffde14;
    --white: #ffffff;

    /* Extended palette */
    --green: #059669;
    --green-dark: #047857;
    --green-light: #10b981;
    --blue-dark: #1e3a8a;
    --blue-light: #3b82f6;
    --gold: #f59e0b;
    --gold-accent: #d97706;
    --accent: var(--blue);
    --accent-2: var(--green);

    /* Typography */
    --text: #1a0f00;
    --text-soft: #451a03;
    --muted: #78716c;
    --muted-2: #a8a29e;

    /* Surfaces */
    --panel: #ffffff;
    --panel-soft: #fffbeb;
    --panel-accent: #fef3c7;
    --bg-soft: #fefce8;
    --line: rgba(26, 15, 0, .08);
    --line-strong: rgba(26, 15, 0, .16);

    /* On colors */
    --on-accent: #ffffff;
    --on-yellow: #1a0f00;
    --on-green: #ffffff;
    --on-gold: #1a0f00;

    /* States */
    --success: #059669;
    --warning: #ea580c;
    --danger: #dc2626;
    --info: var(--blue-light);
    --up: #059669;
    --down: #dc2626;

    /* Design tokens */
    --radius: 16px;
    --radius-sm: 8px;
    --radius-lg: 24px;
    --shadow: 0 10px 25px rgba(26, 15, 0, .15), 0 4px 10px rgba(26, 15, 0, .08);
    --shadow-elev: 0 2px 6px rgba(26, 15, 0, .25);
    --ring: rgba(22, 66, 114, .25);
    --line-card: rgba(26, 15, 0, .12);
    --overlay-0: rgba(255, 255, 255, .02);
    --overlay-1: rgba(255, 255, 255, .08);
    --overlay-2: rgba(255, 255, 255, .12);
    --overlay-3: rgba(255, 255, 255, .18);
    --drop-shadow-logo: drop-shadow(0 2px 8px rgba(26,15,0,.25));
    --shadow-text: rgba(26,15,0,.25);
    --button-affirm-shadow: 0 8px 20px rgba(245, 158, 11, .35), inset 0 0 0 1px rgba(255,255,255,.06);
    --up-10: rgba(5, 150, 105, .1);
    --down-10: rgba(220, 38, 38, .1);
    --success-10: rgba(5, 150, 105, .1);
    --danger-10: rgba(220, 38, 38, .1);
    --info-10: rgba(59, 130, 246, .1);
    --whatsapp: #25d366;
    --whatsapp-10: rgba(37, 211, 102, .1);
    --green-10: rgba(5, 150, 105, .1);
    --green-20: rgba(5, 150, 105, .2);
    --white-06: rgba(255, 255, 255, .06);

    /* Gradients */
    --bg-grad: radial-gradient(80% 50% at 50% 0%, #fcd34d 0%, var(--bg) 60%);
    --button-primary-grad: linear-gradient(135deg, var(--blue-light), var(--blue-dark));
    --button-affirm-grad: linear-gradient(135deg, var(--green-light), var(--green-dark));
    --button-accent-grad: linear-gradient(135deg, var(--gold), var(--gold-accent));
    --card-grad: linear-gradient(135deg, var(--blue-dark), var(--blue));
}

/* =========================
   THEME 4 — Nature Dark
   ========================= */
.theme-nature-dark {
    /* Core brand colors */
    --bg: #95c11f;
    --blue: #164272;
    --yellow: #ffde14;
    --white: #ffffff;

    /* Extended palette */
    --green: #22c55e;
    --green-dark: #083a23;
    --green-light: #4ade80;
    --blue-dark: #0c1e35;
    --blue-light: #3b82f6;
    --gold: #fbbf24;
    --gold-accent: #f59e0b;
    --accent: var(--green);
    --accent-2: var(--gold);

    /* Typography */
    --text: #ffffff;
    --text-soft: #e2e8f0;
    --muted: #cbd5e1;
    --muted-2: #94a3b8;
    --text-input: #0f1419;

    /* Surfaces */
    --bg-input: #ffffff;
    --panel: rgba(22, 66, 114, 0.9);
    --panel-soft: rgba(22, 66, 114, 0.05);
    --panel-accent: rgba(34, 197, 94, 0.1);
    --bg-soft: rgba(255, 255, 255, 0.08);
    --line: rgba(255, 255, 255, .12);
    --line-strong: rgba(255, 255, 255, .2);

    /* On colors */
    --on-accent: #ffffff;
    --on-yellow: #1a1100;
    --on-green: #ffffff;
    --on-gold: #1a0f00;

    /* States */
    --success: #22c55e;
    --warning: #fbbf24;
    --danger: #ef4444;
    --info: var(--blue-light);
    --up: #22c55e;
    --down: #ef4444;

    /* Design tokens */
    --radius: 16px;
    --radius-sm: 8px;
    --radius-lg: 24px;
    --shadow: 0 20px 40px rgba(0, 0, 0, .4), 0 8px 16px rgba(0, 0, 0, .2);
    --shadow-elev: 0 2px 6px rgba(0, 0, 0, .35);
    --ring: rgba(34, 197, 94, .25);
    --line-card: rgba(255, 255, 255, .12);
    --overlay-0: rgba(255, 255, 255, .02);
    --overlay-1: rgba(255, 255, 255, .08);
    --overlay-2: rgba(255, 255, 255, .12);
    --overlay-3: rgba(255, 255, 255, .18);
    --drop-shadow-logo: drop-shadow(0 2px 8px rgba(0,0,0,.45));
    --shadow-text: rgba(0,0,0,.35);
    --button-affirm-shadow: 0 10px 24px rgba(59, 130, 246, .35), inset 0 0 0 1px rgba(255,255,255,.06);
    --up-10: rgba(34, 197, 94, .1);
    --down-10: rgba(239, 68, 68, .1);
    --success-10: rgba(34, 197, 94, .1);
    --danger-10: rgba(239, 68, 68, .1);
    --info-10: rgba(59, 130, 246, .1);
    --whatsapp: #25d366;
    --whatsapp-10: rgba(37, 211, 102, .1);
    --green-10: rgba(34, 197, 94, .1);
    --green-20: rgba(34, 197, 94, .2);
    --white-06: rgba(255, 255, 255, .06);

    /* Gradients */
    /* --bg-grad: linear-gradient(135deg,  0%, var(--bg) 60%, #0c1e35 100%); */
    --bg-grad: linear-gradient(135deg, #95c11f 0%, #083a23 100%);
    /* --bg-grad: linear-gradient(135deg, #95c11f 0%, #083a23 70%, #049c55 100%); */
    --button-primary-grad: linear-gradient(135deg, var(--green-dark), var(--green-dark));
    --button-affirm-grad: linear-gradient(135deg, var(--blue-light), var(--blue-dark));
    --button-accent-grad: linear-gradient(135deg, var(--yellow), var(--gold));
    --card-grad: linear-gradient(135deg, var(--green-dark), var(--green));
}

/* Alias para compatibilidade - copiando as variáveis */
.theme-customer,
.theme-brazil {
    /* Herda todas as propriedades do theme-nature */
    --bg: #95c11f;
    --blue: #164272;
    --yellow: #ffde14;
    --white: #ffffff;
    --green: #95c11f;
    --green-dark: #7a9d1a;
    --green-light: #a8cc3a;
    --blue-dark: #0f2d4f;
    --blue-light: #2563a8;
    --gold: #f4a636;
    --gold-accent: #e8960e;
    --accent: var(--blue);
    --accent-2: var(--gold);
    --text: #0f1419;
    --text-soft: #374151;
    --muted: #6b7280;
    --muted-2: #9ca3af;
    --panel: #ffffff;
    --panel-soft: #f8fdf3;
    --panel-accent: #f0f7e8;
    --bg-soft: #f3f9ed;
    --line: rgba(15, 20, 25, .08);
    --line-strong: rgba(15, 20, 25, .16);
    --on-accent: #ffffff;
    --on-yellow: #1a1100;
    --on-green: #ffffff;
    --on-gold: #1a0f00;
    --success: #059669;
    --warning: #d97706;
    --danger: #dc2626;
    --info: var(--blue-light);
    --up: #059669;
    --down: #dc2626;
    --radius: 16px;
    --radius-sm: 8px;
    --radius-lg: 24px;
    --shadow: 0 10px 25px rgba(15, 20, 25, .08), 0 4px 10px rgba(15, 20, 25, .04);
    --shadow-elev: 0 2px 6px rgba(0, 0, 0, .2);
    --ring: rgba(22, 66, 114, .25);
    --line-card: rgba(255, 255, 255, .12);
    --overlay-0: rgba(255, 255, 255, .02);
    --overlay-1: rgba(255, 255, 255, .08);
    --overlay-2: rgba(255, 255, 255, .12);
    --overlay-3: rgba(255, 255, 255, .18);
    --drop-shadow-logo: drop-shadow(0 2px 8px rgba(0,0,0,.25));
    --shadow-text: rgba(0,0,0,.25);
    --button-affirm-shadow: 0 8px 20px rgba(149, 193, 31, .35), inset 0 0 0 1px rgba(255,255,255,.06);
    --up-10: rgba(5, 150, 105, .1);
    --down-10: rgba(220, 38, 38, .1);
    --success-10: rgba(5, 150, 105, .1);
    --danger-10: rgba(220, 38, 38, .1);
    --info-10: rgba(37, 99, 235, .1);
    --whatsapp: #25d366;
    --whatsapp-10: rgba(37, 211, 102, .1);
    --green-10: rgba(149, 193, 31, .1);
    --green-20: rgba(149, 193, 31, .2);
    --white-06: rgba(255, 255, 255, .06);
    --bg-grad: radial-gradient(80% 50% at 50% 0%, #a8cc3a 0%, var(--bg) 60%);
    --button-primary-grad: linear-gradient(135deg, var(--blue-light), var(--blue-dark));
    --button-affirm-grad: linear-gradient(135deg, var(--green-light), var(--green-dark));
    --button-accent-grad: linear-gradient(135deg, var(--yellow), var(--gold));
    --card-grad: linear-gradient(135deg, var(--blue-dark), var(--blue));
}