/*
 * Cinematic Components — base styles
 *
 * Loaded on any page that uses one of the components. Defines the design
 * tokens, base typography, and a tiny reset scoped to .cc-scope wrappers so
 * we don't fight with theme styles outside of our own components.
 *
 * Each component's CSS extends from these tokens. Per-instance accent colors
 * are injected inline by the shortcode handler.
 */

/* ─── Design tokens, available to all components ─── */
.cc-scope {
    /* Cinematic palette — these are read by every component's CSS. */
    --cc-bg: #0a0a0b;
    --cc-bg-soft: #111114;
    --cc-text: #eae7e2;
    --cc-muted: #5a5a5e;
    --cc-border: #1e1e22;
    --cc-accent: #c8a97e;
    --cc-accent-soft: rgba(200, 169, 126, 0.15);

    /* Defensive resets — themes love to set unhelpful defaults on these. */
    box-sizing: border-box;
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--cc-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.5;
}
.cc-scope *,
.cc-scope *::before,
.cc-scope *::after {
    box-sizing: border-box;
}

/* Reset margins on typography inside our scope. Themes often add weird
 * top/bottom margins via .entry-content h1, .post p, etc — neutralize them
 * inside our scope so our components render predictably. */
.cc-scope h1,
.cc-scope h2,
.cc-scope h3,
.cc-scope h4,
.cc-scope p,
.cc-scope ul,
.cc-scope ol,
.cc-scope figure,
.cc-scope blockquote {
    margin: 0;
    padding: 0;
}

/* Theme often does `img { max-width: 100%; height: auto }` which is fine,
 * but some set `display: inline-block` with unexpected gaps. Reset. */
.cc-scope img,
.cc-scope svg,
.cc-scope video {
    display: block;
    max-width: 100%;
}

/* Buttons in themes inherit weird styling — reset inside our scope. */
.cc-scope button {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

/* Links inside our scope shouldn't inherit theme underline-on-hover, etc. */
.cc-scope a {
    color: inherit;
    text-decoration: none;
}

/* Section wrapper — used by components that need a dark backdrop section
 * that breaks out of theme padding constraints. */
.cc-section {
    background: var(--cc-bg);
    color: var(--cc-text);
    padding: 80px 24px;
    border-radius: 0;
    /* Optional full-bleed: components can opt in by adding .cc-fullbleed */
}
.cc-section.cc-fullbleed {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    width: 100vw;
    padding-left: max(24px, env(safe-area-inset-left));
    padding-right: max(24px, env(safe-area-inset-right));
}

/* Eyebrow / label — used by most components above their headings. */
.cc-scope .cc-eyebrow {
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--cc-muted);
    margin-bottom: 16px;
}

/* Reduced motion: kill long transitions globally inside our scope.
 * Individual components add their own more specific reduced-motion rules. */
@media (prefers-reduced-motion: reduce) {
    .cc-scope *,
    .cc-scope *::before,
    .cc-scope *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}