/* Brand and browser-only editor adapter. Shared suite geometry lives in the copied source CSS. */
:root { --text: var(--ink); --surface-alt: var(--canvas); }
.home-hero-band, .directory-intro-band { background: #f0ebff; }
:root[data-appearance="dark"] :is(.home-hero-band, .directory-intro-band) { background: #29213e; }
.studio-container { margin-block: 36px 64px; }
.tool-studio { margin-top: 0; }
.button-studio { --studio-text: var(--ink); --studio-alt: var(--canvas); }
:root[data-appearance="dark"] .button-studio { --studio-accent: var(--accent-readable); }
.card-style { --card-bg: var(--surface); --art-ink: var(--accent); --art-tint: var(--accent-soft); }
.tool-card-art img { object-fit: contain; }
@media (max-width: 680px) { .studio-container { margin-block: 28px 40px; } .tool-studio { margin-top: 0; } }

/* The violet brand needs a lighter text accent than the reference blue in dark mode. */
:root[data-appearance="dark"][data-theme="style"] { --accent-readable: color-mix(in srgb, var(--accent) 55%, white); }

/* Readable violet foregrounds retain the shared geometry and saturated primary fills. */
:root[data-appearance="dark"][data-theme="style"] :is(
    .home-hero h1 > span, .gallery-heading h2 strong,
    .header-menu-trigger > .icon, .language-trigger > .icon,
    .site-tools-search > .icon, .site-tools-categories .icon, .site-tools-results .icon,
    .gallery-navigation-link > .icon, .card-compact-icon, .card-compact-chevron,
    .gallery-layout button[aria-pressed="true"], .gallery-layout button:hover,
    .company-shell h1 > span, .company-text-link .icon, .about-facts .icon,
    .company-icon, .contact-email-icon, .contact-email-arrow,
    .family-apps-count, .family-apps li a > .icon,
    .blog-example-facts li:first-child,
    button.copy-button[data-copy-feedback] .copy-button-icons .icon
) { color: var(--accent-readable); }
:root[data-appearance="dark"][data-theme="style"] :focus-visible { outline-color: var(--accent-readable); }