/* Panneau — modèle canonique ; son emploi : canon_panel.md. */

@layer components {
    .panel {
        display: flex;
        flex-direction: column;
        gap: var(--panel-space, var(--canon-space-4));
        padding: var(--panel-padding, var(--canon-space-6));
    }

    .panel {
        border: var(--canon-line-width) solid var(--panel-line, var(--canon-theme-line));
        border-inline-start: var(--panel-accent-width, var(--canon-line-width)) solid var(--panel-accent, var(--panel-line, var(--canon-theme-line)));
        border-radius: var(--panel-radius, var(--canon-radius-card));
        background-color: var(--panel-surface, var(--canon-theme-surface));
        box-shadow: var(--panel-shadow, none);
        backdrop-filter: var(--panel-backdrop, none);
    }
}

/* Part locale — les réglages que l'app pose sur cet objet, contexte par contexte. */

@layer tokens {
    .editor-preview,
    .sheet {
        --panel-padding: var(--canon-space-5) var(--canon-space-edge);
        --panel-space: var(--canon-space-3);
        --panel-radius: 0px;
    }
}