/*
 * Base styles for coson/components. Consumes semantic tokens only — never a
 * hardcoded brand colour — so any host theme (including coson/portal's
 * default token set) styles these correctly with zero component-level CSS
 * changes. Class names are prefixed `cc-` to avoid colliding with host or
 * other-package styles. Fallback values mirror coson/portal's Coson design
 * defaults so components stay presentable even without theme.css loaded.
 */

.cc-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--portal-font-sans, ui-sans-serif, system-ui, sans-serif);
    font-weight: 700;
    font-size: 0.875rem;
    padding: 0.5625rem 1rem;
    border-radius: 0.625rem;
    border: 1px solid transparent;
    cursor: pointer;
    transition: opacity 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}
.cc-btn:active { transform: translateY(1px); }

.cc-btn-primary {
    background: rgb(var(--portal-color-primary, 20 102 180));
    /* Neutral Theme: solid primary by default (token resolves to none); a host
       sets --portal-gradient-primary to opt into a gradient-filled button. */
    background-image: var(--portal-gradient-primary, none);
    color: rgb(var(--portal-color-primary-contrast, 255 255 255));
}
.cc-btn-primary:hover { opacity: 0.92; }

.cc-btn-secondary {
    background: rgb(var(--portal-color-surface, 255 255 255));
    color: rgb(var(--portal-color-text, 21 38 59));
    border-color: rgb(var(--portal-color-border-strong, 203 215 226));
}
.cc-btn-secondary:hover {
    background: rgb(var(--portal-color-surface-muted, 244 248 251));
}

/* Ghost: coson-share and coson-message already pass variant="ghost" for most of
   their controls, and with no rule here those buttons rendered with no
   background and a transparent border — effectively invisible. */
.cc-btn-ghost {
    background: transparent;
    color: rgb(var(--portal-color-text-muted, 94 121 147));
}
.cc-btn-ghost:hover {
    background: rgb(var(--portal-color-surface-muted, 244 248 251));
    color: rgb(var(--portal-color-text, 21 38 59));
}

.cc-btn:disabled,
.cc-btn[disabled] {
    opacity: 0.55;
    cursor: default;
}

.cc-btn-danger {
    background: rgb(var(--portal-color-danger, 216 69 59));
    color: rgb(var(--portal-color-primary-contrast, 255 255 255));
}

.cc-card {
    background: rgb(var(--portal-color-surface, 255 255 255));
    border: 1px solid rgb(var(--portal-color-border, 226 234 241));
    border-radius: var(--portal-radius-lg, 1rem);
    box-shadow: var(--portal-shadow-card, 0 1px 2px rgb(21 38 59 / 0.06));
    overflow: hidden;
}
.cc-card-title {
    font-weight: 700;
    padding: 0.875rem 1.125rem;
    border-bottom: 1px solid rgb(var(--portal-color-border, 226 234 241));
    color: rgb(var(--portal-color-text, 21 38 59));
}
.cc-card-body { padding: 1.125rem; }

.cc-alert {
    border-radius: var(--portal-radius-md, 0.75rem);
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    border: 1px solid transparent;
}
.cc-alert-info {
    background: rgb(var(--portal-color-primary, 20 102 180) / 0.08);
    color: rgb(var(--portal-color-primary, 20 102 180));
}
.cc-alert-warning {
    background: rgb(var(--portal-color-warning, 224 148 26) / 0.1);
    color: rgb(var(--portal-color-warning, 224 148 26));
}
.cc-alert-danger {
    background: rgb(var(--portal-color-danger, 216 69 59) / 0.1);
    color: rgb(var(--portal-color-danger, 216 69 59));
}

.cc-modal-backdrop {
    position: fixed; inset: 0; z-index: 100;
    background: rgb(21 38 59 / 0.4);
    display: flex; align-items: center; justify-content: center;
}
.cc-modal {
    background: rgb(var(--portal-color-surface, 255 255 255));
    border-radius: var(--portal-radius-lg, 1rem);
    box-shadow: var(--portal-shadow-md, 0 8px 24px rgb(21 38 59 / 0.09));
    max-width: 32rem; width: 90%;
}
.cc-modal-title {
    font-weight: 700;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid rgb(var(--portal-color-border, 226 234 241));
}
.cc-modal-body { padding: 1.25rem; }