/* ANBU — Colour tokens. Light mode only. NEW SYSTEM (rediseño 2026). Model: a NEUTRAL base UI + ONE per-module accent that tints only the active/CTA surfaces. Amber is the global brand/Home accent. No gradients, no decorative colour. */ :root { /* ---- Neutral base (cool, near-white) ---- */ --bg: #f8f9fb; /* app background (flat, no wash) */ --surface: #ffffff; /* cards / sheets */ --surface-2: #f3f4f7; /* secondary surface, inset fields */ --surface-3: #eceff3; /* tracks / sunken wells */ --border: #e6e8ec; /* hairline */ --border-strong: #d4d8df; /* input / emphasised edge */ --ink: #16181f; /* primary text */ --ink-2: #5b6473; /* secondary text */ --ink-3: #949bab; /* tertiary / placeholder */ /* ---- Brand (amber) — marca / Home / global accent ---- */ --brand: #d97706; --brand-2: #b45309; --brand-soft: #fdecd6; /* ---- Per-module accent palettes (1 = default, 2 = deep, soft = tint, ink = on-soft) ---- */ --m-nutricion: #2563eb; --m-nutricion-2: #1d4ed8; --m-nutricion-soft: #dde6fb; --m-nutricion-ink: #1e40af; /* azul */ --m-entreno: #ca8a04; --m-entreno-2: #a16207; --m-entreno-soft: #fbeec0; --m-entreno-ink: #854d0e; /* amarillo/oro */ --m-checklists: #ea580c; --m-checklists-2:#c2410c; --m-checklists-soft:#fde4d1; --m-checklists-ink:#9a3412; /* naranja */ --m-red: #059669; --m-red-2: #047857; --m-red-soft: #d6f3e6; --m-red-ink: #045c43; /* verde */ --m-scripts: #dc2626; --m-scripts-2: #b91c1c; --m-scripts-soft: #fbdcdc; --m-scripts-ink: #991b1b; /* rojo */ /* ---- Active accent (set per module via the .mod-* scopes below) ---- Components reference var(--accent*) so the SAME markup re-tints per module. Default = brand amber (Home / neutral context). */ --accent: var(--brand); --accent-2: var(--brand-2); --accent-soft: var(--brand-soft); --accent-ink: var(--m-entreno-ink); --on-accent: #ffffff; /* ---- Semantic ---- */ --ok: #059669; --ok-soft: #d6f3e6; --danger: #dc2626; --danger-soft: #fde4e4; --warn: #d97706; --warn-soft: #fdecd6; --info: #2563eb; --info-soft: #dde6fb; /* ---- Adherence (nutrición) ---- */ --adh-verde: #059669; --adh-amarillo: #d97706; --adh-rojo: #dc2626; /* ---- Legacy aliases (kept so foundation cards / v1 components keep resolving) ---- */ --energy: var(--brand); --gold: var(--brand-2); --text-1: var(--ink); --text-2: var(--ink-2); --text-3: var(--ink-3); --text-on-accent: var(--on-accent); --surface-card: var(--surface); --surface-app: var(--bg); --surface-alt: var(--surface-2); --surface-sunken: var(--surface-3); --ink-muted: var(--ink-2); --ink-dim: var(--ink-3); --accent-1: var(--accent); --amber-50:#fff7ed; --amber-100:#fdecd6; --amber-200:#fad9ad; --amber-300:#f6bd6f; --amber-500:#d97706; --amber-600:#b45309; --amber-700:#92400e; --violet:#7c3aed; --success:var(--ok); --success-soft:var(--ok-soft); --warning:var(--warn); --warning-soft:var(--warn-soft); --info-soft:var(--info-soft); --mod-training-1:var(--m-entreno); --mod-training-2:var(--m-entreno-2); --mod-nutrition-1:var(--m-nutricion); --mod-nutrition-2:var(--m-nutricion-2); --mod-checklist-1:var(--m-checklists); --mod-checklist-2:var(--m-checklists-2); --mod-network-1:var(--m-red); --mod-network-2:var(--m-red-2); --mod-scripts-1:var(--m-scripts); --mod-scripts-2:var(--m-scripts-2); --mod-generic-1:#7c3aed; --mod-generic-2:#6d28d9; --link: var(--brand-2); --warning-soft:var(--warn-soft); --grad-energy: var(--brand); /* @kind color */ --app-wash: transparent; /* @kind color */ } /* ---- Module accent scopes ---- Put one of these on the module's root element (e.g. or a wrapper). Every var(--accent*) inside re-tints automatically. */ .mod-nutricion { --accent: var(--m-nutricion); --accent-2: var(--m-nutricion-2); --accent-soft: var(--m-nutricion-soft); --accent-ink: var(--m-nutricion-ink); } .mod-entreno { --accent: var(--m-entreno); --accent-2: var(--m-entreno-2); --accent-soft: var(--m-entreno-soft); --accent-ink: var(--m-entreno-ink); } .mod-checklists { --accent: var(--m-checklists); --accent-2: var(--m-checklists-2); --accent-soft: var(--m-checklists-soft); --accent-ink: var(--m-checklists-ink); } .mod-red { --accent: var(--m-red); --accent-2: var(--m-red-2); --accent-soft: var(--m-red-soft); --accent-ink: var(--m-red-ink); } .mod-scripts { --accent: var(--m-scripts); --accent-2: var(--m-scripts-2); --accent-soft: var(--m-scripts-soft); --accent-ink: var(--m-scripts-ink); } .mod-home { --accent: var(--brand); --accent-2: var(--brand-2); --accent-soft: var(--brand-soft); --accent-ink: var(--m-entreno-ink); }