@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..800;1,400..600&family=Cormorant+Garamond:ital,wght@0,400..600;1,400..500&family=Fraunces:ital,opsz,wght@0,9..144,400..700;1,9..144,400..600&family=Newsreader:ital,opsz,wght@0,6..72,400..600;1,6..72,400..500&family=EB+Garamond:ital,wght@0,400..600;1,400..500&family=Inter:wght@300..700&family=Spectral:ital,wght@0,400..600;1,400..500&family=Montserrat:wght@400..700&display=swap");
/* ============================================================================
DAMASIO ACADEMY — SHARED THEME STYLESHEET (the whole app links this)
----------------------------------------------------------------------------
Port of the 7 canonical themes in design/skins.html. Every portal + the
marketing site links this AFTER css/tokens.css:
Theme is chosen per-user (Settings -> Appearance) and set via
js/theme.js -> applyTheme(name), which stamps data-skin on .
Default = "soothing" (also the :root fallback below).
Each theme sets its own palette vars (--bg, --panel, --ink, --accent, --gold,
--font-display, ...) AND — through the remap block in :root — drives the
brand semantic tokens (--da-*) in tokens.css, so tokens.css components
(.da-btn / .da-card / .da-badge / headings) follow the active theme too.
============================================================================ */
/* ---- :root = SOOTHING defaults + shared constants + --da-* remap --------- */
:root {
/* SOOTHING — sage & cream, warm gold, Cormorant (light) — default */
--bg:#faf8f3; --panel:#ffffff; --sidebar:#f3efe5; --ink:#1a1817; --ink-2:#4a4845; --ink-3:#6e6a64;
--line:#e8e2d1; --accent:#5d7253; --accent-2:#5d7253; --gold:#c9a46e; --track:#eae5d6; --pill:#f0ece0;
--nav-active-bg:rgba(93,114,83,.12); --nav-active-ink:#5d7253;
--font-display:'Cormorant Garamond',serif; --font-body:'Inter',sans-serif; --font-serif:'Cormorant Garamond',serif;
--radius:14px; --radius-sm:10px; --hero-grad:linear-gradient(135deg,#5d7253,#97a98b 92%);
--disp-weight:600; --disp-spacing:0; --btn-ink:#faf8f3; --uppercase-spacing:.18em;
/* shared constants (inherited by every theme unless overridden) */
--shadow:0 1px 2px rgba(0,0,0,.03),0 8px 22px rgba(40,50,35,.05);
--sidebar-ink:var(--ink); --sidebar-ink-2:var(--ink-2); --sidebar-line:var(--line);
/* ---- remap tokens.css brand semantics onto the active theme palette ---- */
--da-bg: var(--bg);
--da-cream: var(--bg);
--da-cream-2: var(--sidebar);
--da-surface: var(--panel);
--da-white: var(--btn-ink);
--da-text: var(--ink);
--da-heading: var(--ink);
--da-muted: var(--ink-3);
--da-line: var(--line);
--da-primary: var(--accent-2);
--da-accent: var(--accent);
--da-highlight: var(--gold);
--da-forest: var(--accent-2);
--da-forest-2: var(--accent);
--da-terracotta: var(--accent);
--da-terracotta-2: var(--accent-2);
--da-yellow: var(--gold);
--da-ink: var(--ink);
--da-font-display: var(--font-display);
--da-font-serif: var(--font-serif);
--da-font-body: var(--font-body);
--da-radius: var(--radius);
--da-radius-sm: var(--radius-sm);
--da-shadow: var(--shadow);
}
/* 1 · SOOTHING (explicit — for switching back) */
html[data-skin="soothing"] {
--bg:#faf8f3; --panel:#ffffff; --sidebar:#f3efe5; --ink:#1a1817; --ink-2:#4a4845; --ink-3:#6e6a64;
--line:#e8e2d1; --accent:#5d7253; --accent-2:#5d7253; --gold:#c9a46e; --track:#eae5d6; --pill:#f0ece0;
--nav-active-bg:rgba(93,114,83,.12); --nav-active-ink:#5d7253;
--font-display:'Cormorant Garamond',serif; --font-body:'Inter',sans-serif; --font-serif:'Cormorant Garamond',serif;
--radius:14px; --radius-sm:10px; --hero-grad:linear-gradient(135deg,#5d7253,#97a98b 92%);
--disp-weight:600; --disp-spacing:0; --btn-ink:#faf8f3; --uppercase-spacing:.18em;
}
/* 2 · LINEN — soft sage minimal, Spectral (light) */
html[data-skin="linen"] {
--bg:#eef0e9; --panel:#f8f9f4; --sidebar:#e7ebe0; --ink:#2b302a; --ink-2:#5f665b; --ink-3:#949a8d;
--line:#dde1d5; --accent:#7c7a4a; --accent-2:#4b5d47; --gold:#a9a05e; --track:#e2e5da; --pill:#e7ebdd;
--nav-active-bg:rgba(75,93,71,.10); --nav-active-ink:#4b5d47;
--font-display:'Spectral',serif; --font-body:'Inter',sans-serif; --font-serif:'Spectral',serif;
--radius:18px; --radius-sm:12px; --hero-grad:linear-gradient(135deg,#4b5d47,#6b7d55);
--disp-weight:500; --disp-spacing:-.01em; --uppercase-spacing:.14em; --btn-ink:#f4ecd8;
}
/* 3 · BOTANICAL — sage greens + cream + rose/gold, Fraunces (light) */
html[data-skin="botanical"] {
--bg:#f3f0e4; --panel:#fbf9f1; --sidebar:#ecefdf; --ink:#2a3a29; --ink-2:#566952; --ink-3:#8a9a83;
--line:#e0e2cd; --accent:#3c5a38; --accent-2:#6e9450; --gold:#c9a94e; --track:#e4e6d3; --pill:#eaeeda;
--nav-active-bg:rgba(60,90,56,.12); --nav-active-ink:#3c5a38;
--font-display:'Fraunces',serif; --font-body:'Inter',sans-serif; --font-serif:'Newsreader',serif;
--radius:15px; --radius-sm:10px; --hero-grad:linear-gradient(135deg,#3c5a38,#6e9450 92%);
--disp-weight:600; --disp-spacing:-.015em; --btn-ink:#f6f4e6;
}
/* 4 · IVORY MAISON — quiet luxury, ivory/champagne/charcoal, Cormorant (light) */
html[data-skin="ivory"] {
--bg:#efeae0; --panel:#faf7ef; --sidebar:#e9e2d3; --ink:#2a2622; --ink-2:#5f574c; --ink-3:#948a7b;
--line:#e1d9c7; --accent:#9a844e; --accent-2:#2a2622; --gold:#b89b5e; --track:#e6ddca; --pill:#efe7d4;
--nav-active-bg:rgba(42,38,34,.07); --nav-active-ink:#2a2622;
--font-display:'Cormorant Garamond',serif; --font-body:'Inter',sans-serif; --font-serif:'Cormorant Garamond',serif;
--radius:9px; --radius-sm:7px; --hero-grad:linear-gradient(135deg,#2a2622,#4a4038 90%);
--disp-weight:600; --disp-spacing:0; --btn-ink:#f6f0e2;
}
/* 5 · VENEZUELA — refined tricolor: deep flag-blue sidebar, gold accents, red sparingly (light) */
html[data-skin="venezuela"] {
--bg:#f5f3ea; --panel:#ffffff; --sidebar:#0d2a66; --ink:#1a2032; --ink-2:#515a6e; --ink-3:#8b93a4;
--line:#e4e1d3; --accent:#0d2a66; --accent-2:#0d2a66; --gold:#e0a400; --track:#e8e5d8; --pill:#eef1f6;
--nav-active-bg:rgba(255,255,255,.12); --nav-active-ink:#ffd24a;
--sidebar-ink:#e7ecf5; --sidebar-ink-2:#9fb0cf; --sidebar-line:rgba(255,255,255,.10);
--font-display:'Playfair Display',serif; --font-body:'Inter',sans-serif; --font-serif:'Cormorant Garamond',serif;
--radius:11px; --radius-sm:8px; --hero-grad:linear-gradient(135deg,#0d2a66,#12408f 90%);
--disp-weight:700; --disp-spacing:-.01em; --btn-ink:#ffffff;
}
/* 6 · NOCTURNE — dark editorial, gold + terracotta (DARK) */
html[data-skin="nocturne"] {
--bg:#14140f; --panel:#1c1c16; --sidebar:#100f0b; --ink:#efe7d3; --ink-2:#b3ac98; --ink-3:#7c7563;
--line:#2a2a22; --accent:#d98a5a; --accent-2:#c8a24a; --gold:#c8a24a; --track:#2a2a20; --pill:#232219;
--nav-active-bg:rgba(200,162,74,.14); --nav-active-ink:#e8c987;
--sidebar-ink:#efe7d3; --sidebar-ink-2:#b3ac98; --sidebar-line:rgba(255,255,255,.08);
--font-display:'Playfair Display',serif; --font-body:'Inter',sans-serif; --font-serif:'Cormorant Garamond',serif;
--radius:13px; --radius-sm:10px; --shadow:0 1px 2px rgba(0,0,0,.4),0 12px 34px rgba(0,0,0,.45);
--hero-grad:linear-gradient(135deg,#3a2a18,#5a3f22 90%); --disp-weight:700; --btn-ink:#14140f;
}
/* 7 · IVY — collegiate oxblood + cream + gold, Fraunces (rich) */
html[data-skin="ivy"] {
--bg:#efe9df; --panel:#fbf7ef; --sidebar:#5a1f1c; --ink:#241a17; --ink-2:#5e4f47; --ink-3:#8d7d72;
--line:#e3d8c6; --accent:#7b241f; --accent-2:#3c1310; --gold:#b78a3c; --track:#e6dcc9; --pill:#efe6d3;
--nav-active-bg:rgba(255,246,232,.14); --nav-active-ink:#f5ead2;
--sidebar-ink:#e9d9bf; --sidebar-ink-2:#c9a98a; --sidebar-line:rgba(255,255,255,.08);
--font-display:'Fraunces',serif; --font-body:'Inter',sans-serif; --font-serif:'EB Garamond',serif;
--radius:8px; --radius-sm:6px; --hero-grad:linear-gradient(135deg,#5a1f1c,#7b241f 88%);
--disp-weight:600; --btn-ink:#f5ead2;
}
/* ============================================================================
SHARED per-theme component overrides (ported from skins.html) — these style
the PORTAL shell (dark sidebars, active-nav accent, progress/card/record).
Harmless to the marketing site, which namespaces its classes (.m-*).
============================================================================ */
/* dark sidebars invert ink so nav is legible on a dark panel */
html[data-skin="ivy"] .side,
html[data-skin="nocturne"] .side,
html[data-skin="venezuela"] .side {
--ink: var(--sidebar-ink);
--ink-2: var(--sidebar-ink-2);
--line: var(--sidebar-line);
color: var(--ink);
}
html[data-skin="ivy"] .brand .wm small,
html[data-skin="nocturne"] .brand .wm small,
html[data-skin="venezuela"] .brand .wm small { color: var(--ink-2); }
/* active nav gets a gold spine on the rich/dark themes */
html[data-skin="ivy"] .nav a.on,
html[data-skin="nocturne"] .nav a.on,
html[data-skin="venezuela"] .nav a.on { box-shadow: inset 2px 0 0 var(--gold); }
/* Venezuela — red used sparingly */
html[data-skin="venezuela"] .hero .bar i { background: linear-gradient(90deg,#0d2a66,#e0a400 52%,#cf142b); }
html[data-skin="venezuela"] .card:nth-child(2) .cap { background: linear-gradient(135deg,#0d2a66,#12408f); }
html[data-skin="venezuela"] .rec { background:#cf142b; box-shadow:0 4px 14px rgba(207,20,43,.35); }
/* smooth theme transition */
html { transition: background .3s ease; }