/* Takopi palette */ :root { --takopi-pink: #f4a5b8; --takopi-flower: #e87a9f; --takopi-teal: #4a9b8e; --takopi-teal-bright: #5ab5a6; } :root[data-md-color-scheme="default"] { --md-primary-fg-color: var(--takopi-flower); --md-primary-fg-color--light: var(--takopi-pink); --md-primary-fg-color--dark: #d95f86; --md-accent-fg-color: var(--takopi-teal); --md-accent-fg-color--transparent: rgba(74, 155, 142, 0.12); --md-typeset-a-color: var(--takopi-teal); --md-default-bg-color: #fffaf7; --md-code-bg-color: rgba(244, 165, 184, 0.1); } :root[data-md-color-scheme="slate"] { --md-primary-fg-color: var(--takopi-pink); --md-primary-fg-color--light: #f7b9c8; --md-primary-fg-color--dark: var(--takopi-flower); --md-accent-fg-color: var(--takopi-teal-bright); --md-accent-fg-color--transparent: rgba(90, 181, 166, 0.12); --md-typeset-a-color: var(--takopi-teal-bright); --md-code-bg-color: rgba(244, 165, 184, 0.12); } /* Warm bokeh-ish background */ :root[data-md-color-scheme="default"] body { background: radial-gradient(1100px circle at 12% 6%, rgba(244, 165, 184, 0.3), transparent 55%), radial-gradient(900px circle at 88% 0%, rgba(74, 155, 142, 0.22), transparent 55%), radial-gradient(1000px circle at 45% 95%, rgba(255, 230, 199, 0.55), transparent 60%), var(--md-default-bg-color); } :root[data-md-color-scheme="slate"] body { background: radial-gradient(900px circle at 12% 0%, rgba(244, 165, 184, 0.12), transparent 55%), radial-gradient(900px circle at 85% 0%, rgba(90, 181, 166, 0.1), transparent 55%), radial-gradient(1000px circle at 50% 100%, rgba(255, 230, 199, 0.06), transparent 60%), var(--md-default-bg-color); } /* Softer shapes */ .md-typeset .admonition, .md-typeset details { border-radius: 12px; } .md-typeset .md-button { border-radius: 999px; } ::selection { background: rgba(232, 122, 159, 0.35); }