/* Percy "dankmemer-lite" theme layer. Loaded last (after base.css, layout.css and
   page CSS) so it can restyle the shell without touching the shared kls base.css.
   Chunky 16px cards, raised surfaces, accent tiles, pill buttons, friendly headings. */

:root {
    --radius-card: 16px;
    --radius-pill: 999px;
    --accent-violet: #8b5cf6;
    --accent-cyan: #22d3ee;
    --accent-green: #4ade80;
    --accent-pink: #f472b6;
    --font-display: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --surface-raised: color-mix(in srgb, var(--box) 94%, white);
    --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 6px 18px rgba(0, 0, 0, 0.28);
    --shadow-card-hover: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 12px 28px rgba(0, 0, 0, 0.38);
}

[data-theme="light"] {
    --accent-violet: #7c3aed;
    --accent-cyan: #0891b2;
    --accent-green: #16a34a;
    --accent-pink: #db2777;
    --surface-raised: color-mix(in srgb, var(--box) 70%, white);
    --shadow-card: 0 1px 2px rgba(60, 40, 20, 0.06), 0 6px 16px rgba(60, 40, 20, 0.07);
    --shadow-card-hover: 0 2px 4px rgba(60, 40, 20, 0.08), 0 12px 26px rgba(60, 40, 20, 0.12);
}

/* -- Headings ------------------------------------------------------------ */
h1, h2, h3, h4,
.section-header h2 {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -0.01em;
}
h1 { font-weight: 800; }

/* -- Icon tile (coloured square holding an sprite icon) ------------------ */



/* -- Cards ---------------------------------------------------------------
   The surface itself is components.css's .card; this layer only adds the optional accent
   (a tinted icon tile) so a card never re-points the global --accent for its children. */
.card--accent-violet { --card-accent: var(--accent-violet); }
.card--accent-cyan   { --card-accent: var(--accent-cyan); }
.card--accent-green  { --card-accent: var(--accent-green); }
.card--accent-pink   { --card-accent: var(--accent-pink); }
.card--accent-brand  { --card-accent: var(--brand, var(--branding)); }


/* -- Buttons & chips ----------------------------------------------------- */
.button {
    border-radius: var(--radius-pill);
}