/* ============================================================================
Grimalkin — Faceted Ink design system
Drop-in extension for the existing assets/style.css.
Load AFTER style.css:
No JS. No build step. Every rule is progressive-enhancement safe.
========================================================================== */
/* ---- 1. Tokens ----------------------------------------------------------- */
/* Redefines + extends the :root from style.css. Plum stays the brand anchor;
a cool "crystalline indigo" (same chroma/lightness, different hue) joins it
for geometric glints and hover states. All new colors in oklch with hex
fallbacks folded in via the values chosen. */
:root {
/* surfaces (warm paper, unchanged + one deeper panel) */
--paper: #faf9f6;
--paper-2: #f2f0ea;
--paper-3: #ebe7dd; /* NEW — deepest panel / faceted fills */
--ink: #181716;
--muted: #5c574f;
--line: #e2ded4;
--line-strong: #cfc8ba; /* NEW — facet hairlines that need presence */
/* accents — matched chroma/lightness, varied hue */
--accent: #5b3e7e; /* plum ~ oklch(0.42 0.093 312) */
--accent-ink: #432e5e;
--accent-2: #3f4a86; /* crystalline indigo ~ oklch(0.42 0.093 268) */
--accent-2-ink: #2f3868;
/* facet system */
--facet-line: color-mix(in srgb, var(--ink) 12%, transparent);
--facet-line-2: color-mix(in srgb, var(--ink) 22%, transparent);
--facet-fill: color-mix(in srgb, var(--accent) 5%, var(--paper));
/* geometry + motion */
--edge: 14px; /* the canonical facet cut length */
--shadow-crisp: 0 1px 0 var(--line-strong);
--ease-facet: cubic-bezier(.2, .7, .2, 1);
/* mark matting — inert in light mode (the ink cat reads on warm paper). See §8a. */
--mat-bg: transparent;
--mat-line: transparent;
--mat-pad: 0;
--mat-pad-chip: 0;
--mat-edge: 0px;
--mat-edge-chip:0px;
--mat-blend: normal;
}
/* ---- 2. Dark theme ------------------------------------------------------- */
/* Two ways in: system preference (default), OR an explicit data-theme
override on set by the header's .theme-toggle button (see
assets/theme-toggle.js) — the override exists mainly so a dark-mode
device can still preview/debug the light theme, and vice versa. Warm
near-black keeps the "ink on paper" soul at night. */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--paper: #14130f;
--paper-2: #1c1a15;
--paper-3: #26231b;
--ink: #f2efe8;
--muted: #a49d90;
--line: #33302a;
--line-strong: #47423a;
--accent: #b79fd6; /* plum, lifted for contrast on dark */
--accent-ink: #cbb6e6;
--accent-2: #9fb0ea; /* indigo, lifted */
--accent-2-ink: #b9c5f2;
--facet-line: color-mix(in srgb, var(--ink) 10%, transparent);
--facet-line-2: color-mix(in srgb, var(--ink) 20%, transparent);
--facet-fill: color-mix(in srgb, var(--accent) 8%, var(--paper));
/* the mat lights up: a warm-paper ground the ink cat can sit on at night */
--mat-bg: #faf9f6;
--mat-line: #d8d2c6;
--mat-pad: 1.15rem 1.4rem;
--mat-pad-chip: 3px 4px;
--mat-edge: 16px;
--mat-edge-chip:7px;
--mat-blend: multiply;
color-scheme: dark;
}
:root:not([data-theme="light"]) .theme-toggle .icon-light { display: none; }
:root:not([data-theme="light"]) .theme-toggle .icon-dark { display: inline; }
}
[data-theme="dark"] {
--paper:#14130f; --paper-2:#1c1a15; --paper-3:#26231b;
--ink:#f2efe8; --muted:#a49d90; --line:#33302a; --line-strong:#47423a;
--accent:#b79fd6; --accent-ink:#cbb6e6; --accent-2:#9fb0ea; --accent-2-ink:#b9c5f2;
--facet-line: color-mix(in srgb, var(--ink) 10%, transparent);
--facet-line-2: color-mix(in srgb, var(--ink) 20%, transparent);
--facet-fill: color-mix(in srgb, var(--accent) 8%, var(--paper));
--mat-bg:#faf9f6; --mat-line:#d8d2c6; --mat-pad:1.15rem 1.4rem;
--mat-pad-chip:3px 4px; --mat-edge:16px; --mat-edge-chip:7px; --mat-blend:multiply;
color-scheme: dark;
}
[data-theme="dark"] .theme-toggle .icon-light { display: none; }
[data-theme="dark"] .theme-toggle .icon-dark { display: inline; }
/* ---- 3. Facet motif utilities ------------------------------------------- */
/* The single idea: a beveled corner. Applied consistently it becomes the brand.
Use on cards, buttons, images, panels. One variable (--edge) tunes all of it. */
.facet { clip-path: polygon(var(--edge) 0, 100% 0, 100% calc(100% - var(--edge)), calc(100% - var(--edge)) 100%, 0 100%, 0 var(--edge)); }
.facet--sm { --edge: 9px; }
.facet--lg { --edge: 22px; }
.facet--tl { clip-path: polygon(var(--edge) 0, 100% 0, 100% 100%, 0 100%, 0 var(--edge)); } /* top-left cut only */
.facet--br { clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--edge)), calc(100% - var(--edge)) 100%, 0 100%); }
/* Hairline crystalline border that respects the bevel (uses a gradient outline
trick so the cut edge is drawn, not just clipped). */
.facet-outline {
position: relative;
background: var(--paper);
}
.facet-outline::before {
content: "";
position: absolute; inset: 0;
padding: 1px;
background: linear-gradient(135deg, var(--line-strong), var(--facet-line));
clip-path: polygon(var(--edge) 0, 100% 0, 100% calc(100% - var(--edge)), calc(100% - var(--edge)) 100%, 0 100%, 0 var(--edge));
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor; mask-composite: exclude;
pointer-events: none;
}
/* ---- 4. Vine divider ----------------------------------------------------- */
/* Replaces the plain 1px section rule with a running-vine hairline band —
a wavy stem with alternating leaves, drawn from the same botanical vocabulary
as the mark. Rendered as an INLINE