/* PlatanoAI theme (Bootstrap 5.3) - One palette, two modes: light & dark - Uses data-bs-theme="light|dark" on - Avoid gradients; keep colors solid */ :root, [data-bs-theme="light"]{ --brand-bg: #f0ede6; --brand-surface: #ffffff; --brand-surface-2: #f7f5ef; --brand-border: #d8d4c8; --brand-ink: #1a1a18; --brand-text: #1a1a18; --brand-muted: #5a5a50; --brand-muted-2: #6b6b60; --brand-muted-3: #9a9a8c; --brand-accent: #f5c518; --brand-accent-strong: #c4a010; --brand-accent-border: rgba(245, 197, 24, 0.55); --app-bg: var(--brand-bg); --app-card: var(--brand-surface); --app-sidebar: var(--brand-surface-2); --app-border: var(--brand-border); --app-navbar-bg: var(--brand-surface); --app-control-bg: var(--brand-surface-2); --app-input-bg: #ffffff; --app-input-placeholder: var(--brand-muted-3); --app-divider: rgba(26, 26, 24, 0.14); --app-hover: rgba(26, 26, 24, 0.045); --text-primary: var(--brand-text); --text-secondary: var(--brand-muted); /* Legacy variable names used across templates/JS */ --purple: var(--brand-accent); --purple-hover: #ffd24a; --purple-active: #eab308; --purple-soft: rgba(245, 197, 24, 0.16); --green: #16a34a; --red: #dc2626; --yellow: var(--brand-accent); --blue: #2563eb; --tx-ingreso: var(--green); --tx-egreso: var(--red); --tx-movimiento: var(--brand-accent-strong); /* Bootstrap tokens */ --bs-body-bg: var(--app-bg); --bs-body-color: var(--text-primary); --bs-border-color: var(--app-border); --bs-secondary-color: var(--text-secondary); --bs-secondary-bg: var(--app-control-bg); --bs-tertiary-bg: var(--app-control-bg); --bs-link-color: var(--text-primary); --bs-link-hover-color: var(--brand-accent-strong); --bs-card-bg: var(--app-card); --bs-modal-bg: var(--app-card); } [data-bs-theme="dark"]{ --brand-bg: #0b0b0a; --brand-surface: #141413; --brand-surface-2: #1a1a18; --brand-border: #2a2a25; --brand-ink: #1a1a18; --brand-text: #f0ede6; --brand-muted: #b0ac9e; --brand-muted-2: #9a9a8c; --brand-muted-3: #6b6b60; --brand-accent: #f5c518; --brand-accent-strong: #ffd24a; --brand-accent-border: rgba(245, 197, 24, 0.40); --app-bg: var(--brand-bg); --app-card: var(--brand-surface); --app-sidebar: var(--brand-surface-2); --app-border: var(--brand-border); --app-navbar-bg: var(--brand-surface); --app-control-bg: var(--brand-surface-2); --app-input-bg: #10100e; --app-input-placeholder: var(--brand-muted-2); --app-divider: rgba(240, 237, 230, 0.12); --app-hover: rgba(240, 237, 230, 0.06); --text-primary: var(--brand-text); --text-secondary: var(--brand-muted); --purple: var(--brand-accent); --purple-hover: var(--brand-accent-strong); --purple-active: #eab308; --purple-soft: rgba(245, 197, 24, 0.10); --green: #22c55e; --red: #f87171; --yellow: var(--brand-accent); --blue: #60a5fa; --tx-ingreso: var(--green); --tx-egreso: var(--red); --tx-movimiento: var(--brand-accent); --bs-body-bg: var(--app-bg); --bs-body-color: var(--text-primary); --bs-border-color: var(--app-border); --bs-secondary-color: var(--text-secondary); --bs-secondary-bg: var(--app-control-bg); --bs-tertiary-bg: var(--app-control-bg); --bs-link-color: var(--brand-accent); --bs-link-hover-color: var(--brand-accent-strong); --bs-card-bg: var(--app-card); --bs-modal-bg: var(--app-card); } .app-bg{ background:var(--app-bg); color:var(--text-primary); } .card-dark{ background:var(--app-card); border:1px solid var(--app-border); } .app-border{ border-color:var(--app-border) !important; } .navbar{ background:var(--app-navbar-bg); } a, .nav-link{ color:var(--text-primary); } .nav-link:hover{ color:var(--brand-accent); } .text-secondary{ color:var(--text-secondary) !important; } .btn-primary-purple{ background:var(--brand-accent); border:2px solid var(--brand-ink); color:var(--brand-ink); } .btn-primary-purple:hover{ background:var(--purple-hover); border-color:var(--brand-ink); color:var(--brand-ink); } .btn-primary-purple:active{ background:var(--purple-active); border-color:var(--brand-ink); color:var(--brand-ink); } .btn-outline-purple{ border-color:var(--brand-accent); color:var(--brand-accent); } .btn-outline-purple:hover{ background:var(--purple-soft); border-color:var(--brand-accent-strong); color:var(--text-primary); } .badge-soft{ background:var(--app-control-bg); border:1px solid var(--app-border); color:var(--text-primary); } .input-dark{ background:var(--app-input-bg) !important; border-color:var(--app-border) !important; color:var(--text-primary) !important; } .input-dark::placeholder{ color:var(--app-input-placeholder) !important; } .table-dark-custom{ --bs-table-bg: transparent; --bs-table-border-color: var(--app-border); --bs-table-color: var(--text-primary); --bs-table-hover-bg: var(--app-hover); color:var(--text-primary); } .small-mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; } .status-chip{ display:inline-block; padding:8px 10px; border:1px solid var(--app-border); border-radius:10px; background:var(--app-control-bg); } /* Make Bootstrap components match the theme */ .card, .modal-content { background: var(--app-card); border-color: var(--app-border); } .list-group-item { background: var(--app-card); border-color: var(--app-border); color: var(--text-primary); } .btn-outline-secondary { --bs-btn-color: var(--text-primary); --bs-btn-border-color: var(--app-border); --bs-btn-hover-bg: var(--app-control-bg); --bs-btn-hover-border-color: var(--app-border); --bs-btn-hover-color: var(--text-primary); --bs-btn-active-bg: var(--app-control-bg); --bs-btn-active-border-color: var(--app-border); }