/* ==========================================================================
   TICTO.BRAND — Unified Button & Interactive Control Design System
   Centralized tokens + utility classes for every clickable control site-wide:
   primary CTAs, secondary/outline actions, selection pills/chips, glass icon
   buttons, and admin data-row action pills. Supports light + dark mode via
   the same html[data-theme] convention used across style.css.
   ========================================================================== */

:root {
    /* Radius hierarchy */
    --btn-radius-pill: 9999px;
    --btn-radius-standard: 12px;
    --btn-radius-sm: 8px;
    --btn-radius-circle: 50%;

    /* Motion — high-end haptic feel */
    --btn-transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --btn-lift: translateY(-1.5px);
    --btn-press: scale(0.97);

    /* Primary CTA — brand crimson gradient (built on the site's existing
       --primary/--primary-dark tokens, not a parallel color) */
    --btn-primary-grad: linear-gradient(135deg, var(--primary, #C41230), var(--primary-dark, #9A0E25));
    --btn-primary-text: #ffffff;
    --btn-primary-glow: rgba(196, 18, 48, 0.35);
    --btn-primary-glow-hover: rgba(196, 18, 48, 0.48);

    /* Premium dark fill — admin/high-contrast surfaces */
    --btn-dark-fill: #111424;
    --btn-dark-fill-hover: #1c2140;

    /* Secondary / outline — frosted translucent, light mode default */
    --btn-secondary-bg: rgba(17, 20, 36, 0.035);
    --btn-secondary-bg-hover: rgba(17, 20, 36, 0.07);
    --btn-secondary-border: rgba(17, 20, 36, 0.14);
    --btn-secondary-border-hover: rgba(17, 20, 36, 0.28);
    --btn-secondary-text: #111424;

    /* Chips / pills — light mode default */
    --btn-chip-bg: rgba(17, 20, 36, 0.035);
    --btn-chip-border: rgba(17, 20, 36, 0.12);
    --btn-chip-text: #64748b;
    --btn-chip-bg-hover: rgba(17, 20, 36, 0.07);
    --btn-chip-active-grad: linear-gradient(135deg, var(--primary, #C41230), var(--primary-dark, #9A0E25));
    --btn-chip-active-text: #ffffff;

    /* Glassmorphic icon buttons — same on both themes by design (they sit
       on photos/hero imagery, not page background) */
    --btn-glass-bg: rgba(0, 0, 0, 0.45);
    --btn-glass-bg-hover: rgba(0, 0, 0, 0.65);
    --btn-glass-border: rgba(255, 255, 255, 0.15);
    --btn-glass-text: #ffffff;

    /* Admin data-row action pills */
    --btn-action-active-bg: rgba(16, 185, 129, 0.12);
    --btn-action-active-text: #059669;
    --btn-action-active-border: rgba(16, 185, 129, 0.25);

    --btn-action-edit-bg: rgba(148, 163, 184, 0.14);
    --btn-action-edit-text: #475569;
    --btn-action-edit-bg-hover: rgba(148, 163, 184, 0.24);

    --btn-action-delete-bg: rgba(244, 63, 94, 0.1);
    --btn-action-delete-text: #f43f5e;
    --btn-action-delete-border: rgba(244, 63, 94, 0.2);
}

html[data-theme="dark"] {
    --btn-primary-glow: rgba(196, 18, 48, 0.45);
    --btn-primary-glow-hover: rgba(196, 18, 48, 0.6);

    --btn-dark-fill: #22273f;
    --btn-dark-fill-hover: #2d3355;

    --btn-secondary-bg: rgba(255, 255, 255, 0.05);
    --btn-secondary-bg-hover: rgba(255, 255, 255, 0.12);
    --btn-secondary-border: rgba(255, 255, 255, 0.15);
    --btn-secondary-border-hover: rgba(255, 255, 255, 0.3);
    --btn-secondary-text: #ffffff;

    --btn-chip-bg: rgba(255, 255, 255, 0.04);
    --btn-chip-border: rgba(255, 255, 255, 0.1);
    --btn-chip-text: #94a3b8;
    --btn-chip-bg-hover: rgba(255, 255, 255, 0.09);

    --btn-action-active-bg: rgba(16, 185, 129, 0.16);
    --btn-action-active-text: #6ee7b7;
    --btn-action-active-border: rgba(110, 231, 183, 0.3);

    --btn-action-edit-bg: rgba(148, 163, 184, 0.12);
    --btn-action-edit-text: #cbd5e1;
    --btn-action-edit-bg-hover: rgba(148, 163, 184, 0.22);
}

/* ── Shared base every variant inherits ── */
.btn-primary,
.btn-secondary,
.btn-outline,
.btn-pill,
.chip,
.btn-icon-glass,
.btn-action-sm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: none;
    cursor: pointer;
    font-family: inherit;
    text-decoration: none;
    transition: var(--btn-transition);
    -webkit-tap-highlight-color: transparent;
}

.btn-primary:active,
.btn-secondary:active,
.btn-outline:active,
.btn-pill:active,
.chip:active,
.btn-icon-glass:active,
.btn-action-sm:active {
    transform: var(--btn-press);
}

.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn-outline:focus-visible,
.btn-pill:focus-visible,
.chip:focus-visible,
.btn-icon-glass:focus-visible,
.btn-action-sm:focus-visible {
    outline: 2px solid var(--primary, #C41230);
    outline-offset: 2px;
}

.btn-primary:disabled,
.btn-secondary:disabled,
.btn-outline:disabled,
.btn-pill:disabled,
.chip:disabled,
.btn-icon-glass:disabled,
.btn-action-sm:disabled,
.btn-primary.is-disabled,
.btn-secondary.is-disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

/* ── 1. Primary CTA ── */
.btn-primary {
    padding: 13px 26px;
    border-radius: var(--btn-radius-standard);
    background: var(--btn-primary-grad);
    color: var(--btn-primary-text);
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 0.3px;
    box-shadow: 0 4px 15px var(--btn-primary-glow);
}
.btn-primary:hover {
    transform: var(--btn-lift);
    box-shadow: 0 8px 22px var(--btn-primary-glow-hover);
}

.btn-primary.btn-dark {
    background: var(--btn-dark-fill);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}
.btn-primary.btn-dark:hover {
    background: var(--btn-dark-fill-hover);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.24);
}

/* ── 2. Secondary / outline ── */
.btn-secondary,
.btn-outline {
    padding: 13px 26px;
    border-radius: var(--btn-radius-standard);
    background: var(--btn-secondary-bg);
    border: 1px solid var(--btn-secondary-border);
    color: var(--btn-secondary-text);
    font-weight: 600;
    font-size: 0.92rem;
}
.btn-secondary:hover,
.btn-outline:hover {
    background: var(--btn-secondary-bg-hover);
    border-color: var(--btn-secondary-border-hover);
    transform: var(--btn-lift);
}

/* Small variant — compact rows (admin forms, inline actions) */
.btn-sm { padding: 8px 16px; font-size: 0.85rem; border-radius: var(--btn-radius-sm); }

/* ── 3. Selection pills / chips ── */
.btn-pill,
.chip {
    padding: 9px 18px;
    border-radius: var(--btn-radius-pill);
    background: var(--btn-chip-bg);
    border: 1px solid var(--btn-chip-border);
    color: var(--btn-chip-text);
    font-weight: 600;
    font-size: 0.86rem;
}
.btn-pill:hover,
.chip:hover {
    background: var(--btn-chip-bg-hover);
    border-color: var(--btn-secondary-border-hover);
}

.btn-pill.is-active,
.chip.is-active,
.btn-pill[aria-selected="true"],
.chip[aria-selected="true"] {
    background: var(--btn-chip-active-grad);
    border-color: transparent;
    color: var(--btn-chip-active-text);
    box-shadow: 0 3px 10px var(--btn-primary-glow);
    transform: var(--btn-lift);
}

/* Checkbox/radio-driven pills (sibling-selector pattern — hidden input +
   .pill-content span) resolve to the same active treatment via :checked */
.btn-pill input,
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.btn-pill input:checked + .pill-content,
.chip input:checked + .pill-content {
    background: var(--btn-chip-active-grad);
    border-color: transparent;
    color: var(--btn-chip-active-text);
    box-shadow: 0 3px 10px var(--btn-primary-glow);
}

/* ── 4. Glassmorphic icon buttons ── */
.btn-icon-glass {
    width: 38px;
    height: 38px;
    border-radius: var(--btn-radius-circle);
    background: var(--btn-glass-bg);
    border: 1px solid var(--btn-glass-border);
    color: var(--btn-glass-text);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 0;
    flex-shrink: 0;
}
.btn-icon-glass:hover {
    background: var(--btn-glass-bg-hover);
    transform: scale(1.06);
}
.btn-icon-glass.btn-icon-glass-lg { width: 42px; height: 42px; }
.btn-icon-glass svg { width: 18px; height: 18px; }

/* ── 5. Admin data-row action pills ── */
.btn-action-sm {
    padding: 6px 14px;
    border-radius: var(--btn-radius-sm);
    font-size: 13px;
    font-weight: 500;
    border: 1px solid transparent;
}

.btn-action-active {
    background: var(--btn-action-active-bg);
    color: var(--btn-action-active-text);
    border-color: var(--btn-action-active-border);
    font-weight: 600;
    cursor: default;
}

.btn-action-edit {
    background: var(--btn-action-edit-bg);
    color: var(--btn-action-edit-text);
}
.btn-action-edit:hover { background: var(--btn-action-edit-bg-hover); }

.btn-action-delete {
    background: var(--btn-action-delete-bg);
    color: var(--btn-action-delete-text);
    border-color: var(--btn-action-delete-border);
}
.btn-action-delete:hover {
    background: var(--btn-action-delete-text);
    color: #fff;
    border-color: var(--btn-action-delete-text);
}

/* ── Dashed "add new" utility (audience/category/etc. creators) ── */
.btn-dashed {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border: 1.5px dashed var(--btn-secondary-border);
    background: transparent;
    color: var(--btn-chip-text);
    border-radius: var(--btn-radius-standard);
    font-weight: 600;
    font-size: 0.86rem;
    cursor: pointer;
    transition: var(--btn-transition);
}
.btn-dashed:hover {
    border-color: var(--primary, #C41230);
    background: var(--btn-primary-glow);
    background: rgba(196, 18, 48, 0.06);
    color: var(--primary, #C41230);
}
html[data-theme="dark"] .btn-dashed:hover {
    background: rgba(196, 18, 48, 0.14);
}