/*
 * eye-base — generic content-element background ("Background" appearance field).
 *
 * Shared card structure (padding + radius) applies to ANY frame-background-*
 * class, so a project only needs to declare the colour for its own brand
 * options. Everything is driven by CSS custom properties so a sitepackage can
 * re-skin the neutrals or the structure without overriding these rules — e.g.:
 *
 *   :root {
 *       --eyebase-bg-dark: #1f2933;   // brand dark
 *       --eyebase-bg-radius: 16px;    // brand card radius
 *   }
 *
 * The neutrals light / dark / black are shipped by eye-base; brand colours come
 * from the project (page TSConfig addItems + the project's own CSS).
 */

[class*="frame-background-"] {
    padding: var(--eyebase-bg-padding, 2rem);
    border-radius: var(--eyebase-bg-radius, 0);
}

.frame-background-light {
    background-color: var(--eyebase-bg-light, #f4f4f4);
    color: var(--eyebase-fg-light, #1a1a1a);
}

.frame-background-dark {
    background-color: var(--eyebase-bg-dark, #333333);
    color: var(--eyebase-fg-dark, #ffffff);
}

.frame-background-black {
    background-color: var(--eyebase-bg-black, #000000);
    color: var(--eyebase-fg-black, #ffffff);
}