/* =================================================================
   RAXE — Unified Component System v2.0
   Buttons, Cards, Badges

   Base + modifier pattern. All components use semantic design tokens.
   This file replaces scattered one-off variants with composable classes.

   Token dependency: tokens.css must be loaded first.
   ================================================================= */


/* =================================================================
   1. BUTTONS

   Base:       .btn
   Variants:   .btn-primary, .btn-secondary, .btn-accent, .btn-ghost, .btn-text
   Sizes:      .btn-sm, .btn-lg
   Effects:    .btn-glow
   States:     :hover, :focus-visible, :active, :disabled, [aria-busy="true"]
   Contexts:   Dark-first; use .light-section for light backgrounds
   ================================================================= */

/* --- Base reset --- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;       /* 10px 20px */
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    font-family: inherit;
    font-size: 0.875rem;              /* 14px */
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    user-select: none;
    transition:
        background 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.15s ease;
}

.btn:focus-visible {
    outline: 2px solid var(--color-brand-primary);
    outline-offset: 2px;
}

.btn:active {
    transform: scale(0.97);
}

.btn:disabled,
.btn[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Loading state: spinner replaces content */
.btn[aria-busy="true"] {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}

.btn[aria-busy="true"]::after {
    content: "";
    position: absolute;
    width: 1em;
    height: 1em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: var(--radius-full);
    animation: btn-spin 0.6s linear infinite;
    color: var(--color-text-primary);
}

@keyframes btn-spin {
    to { transform: rotate(360deg); }
}

/* --- Primary: brand gradient fill --- */
.btn-primary {
    background: var(--color-brand-gradient);
    color: var(--color-surface-primary);
    border-color: transparent;
}

.btn-primary:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.btn-primary:active {
    transform: translateY(0) scale(0.97);
}

/* --- Secondary: outlined/ghost --- */
.btn-secondary {
    background: transparent;
    color: var(--color-text-primary);
    border-color: rgba(255, 255, 255, 0.2);
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--color-brand-primary);
}

/* --- Accent: high-emphasis CTA (magenta/gradient) --- */
.btn-accent {
    background: linear-gradient(135deg, var(--color-brand-secondary), #c026d3);
    color: #ffffff;
    border-color: transparent;
    box-shadow: 0 4px 16px rgba(232, 121, 249, 0.3);
}

.btn-accent:hover {
    box-shadow: 0 6px 24px rgba(232, 121, 249, 0.45);
    transform: translateY(-2px);
}

.btn-accent:active {
    transform: translateY(0) scale(0.97);
}

/* --- Tertiary: bordered, transparent background --- */
.btn-tertiary {
    background: transparent;
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border-primary);
}

.btn-tertiary:hover {
    color: var(--color-text-primary);
    border-color: var(--color-border-strong);
    background: var(--color-surface-elevated);
}

/* --- Ghost: transparent with subtle hover --- */
.btn-ghost {
    background: transparent;
    color: var(--color-text-secondary);
    border-color: var(--color-border-subtle);
}

.btn-ghost:hover {
    color: var(--color-text-primary);
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.15);
}

/* --- Text: link-style, no border/bg --- */
.btn-text {
    background: none;
    color: var(--color-text-secondary);
    border: none;
    padding: 0.5rem 0;
}

.btn-text:hover {
    color: var(--color-brand-primary);
}

/* --- Brand sub-variants: Labs (cyan) and Defend (magenta) --- */
.btn-labs {
    background: var(--color-accent-labs);
    color: var(--color-surface-primary);
    border-color: transparent;
}

.btn-labs:hover {
    box-shadow: 0 4px 20px var(--color-accent-labs-glow);
    transform: translateY(-1px);
}

.btn-labs-outline {
    background: transparent;
    color: var(--color-text-primary);
    border-color: var(--color-border-accent);
}

.btn-labs-outline:hover {
    background: rgba(34, 211, 238, 0.1);
}

.btn-defend {
    background: linear-gradient(135deg, var(--color-brand-secondary), #c026d3);
    color: #ffffff;
    border-color: transparent;
}

.btn-defend:hover {
    box-shadow: 0 6px 24px rgba(232, 121, 249, 0.45);
    transform: translateY(-2px);
}

/* --- Size modifiers --- */
.btn-sm {
    padding: 0.375rem 0.75rem;        /* 6px 12px */
    font-size: 0.75rem;               /* 12px */
    gap: 0.375rem;
}

.btn-lg {
    padding: 0.875rem 1.75rem;        /* 14px 28px */
    font-size: 1rem;                  /* 16px */
    gap: 0.625rem;
}

/* --- Glow effect (additive, combine with any variant) --- */
.btn-glow {
    box-shadow: 0 0 20px rgba(34, 211, 238, 0.4);
    animation: btn-glow-pulse 2s ease-in-out infinite;
}

@keyframes btn-glow-pulse {
    0%, 100% { box-shadow: 0 0 20px rgba(34, 211, 238, 0.4); }
    50%      { box-shadow: 0 0 30px rgba(34, 211, 238, 0.6), 0 0 50px rgba(232, 121, 249, 0.2); }
}

/* --- Full-width modifier --- */
.btn-block {
    width: 100%;
}

/* --- Icon-only modifier --- */
.btn-icon {
    padding: 0.5rem;
    gap: 0;
}

.btn-icon.btn-sm {
    padding: 0.375rem;
}

.btn-icon.btn-lg {
    padding: 0.75rem;
}


/* =================================================================
   2. CARDS

   Base:       .card
   Variants:   .card-elevated, .card-bordered, .card-severity, .card-interactive
   Slots:      .card-header, .card-body, .card-footer, .card-meta
   Contexts:   Dark-first; use .light-section for light backgrounds
   ================================================================= */

/* --- Base card --- */
.card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--color-surface-card);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}

/* --- Card: Elevated (shadow) --- */
.card-elevated {
    box-shadow: var(--shadow-md);
}

.card-elevated:hover {
    box-shadow: var(--shadow-lg);
}

/* --- Card: Bordered (subtle border emphasis) --- */
.card-bordered {
    border-width: 1px;
    border-color: var(--color-border-default);
}

/* --- Card: Interactive (hover lift) --- */
.card-interactive {
    cursor: pointer;
}

.card-interactive:hover {
    transform: translateY(-3px);
    border-color: var(--color-accent-labs);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.card-interactive:active {
    transform: translateY(-1px);
}

.card-interactive:focus-visible {
    outline: 2px solid var(--color-brand-primary);
    outline-offset: 2px;
}

/* --- Card: Severity (left color band) --- */
.card-severity {
    border-left-width: 4px;
    border-left-style: solid;
}

.card-severity-critical {
    border-left-color: var(--color-critical, #ef4444);
}

.card-severity-high {
    border-left-color: var(--color-warning, #f97316);
}

.card-severity-medium {
    border-left-color: #eab308;
}

.card-severity-low {
    border-left-color: var(--color-success, #22c55e);
}

.card-severity-info {
    border-left-color: var(--color-info, #3b82f6);
}

/* --- Card: Top-band severity (alternative, used in advisories) --- */
.card-severity-top {
    border-top-width: 4px;
    border-top-style: solid;
}

.card-severity-top.card-severity-critical { border-top-color: #ef4444; }
.card-severity-top.card-severity-high     { border-top-color: #f97316; }
.card-severity-top.card-severity-medium   { border-top-color: #eab308; }
.card-severity-top.card-severity-low      { border-top-color: #22c55e; }

/* --- Card: Featured (full-width in grid) --- */
.card-featured {
    grid-column: 1 / -1;
}

/* --- Card: Warning (problem cards — red tint) --- */
.card-warning {
    background: rgba(239, 68, 68, 0.06);
    border-color: rgba(239, 68, 68, 0.2);
    border-left: 3px solid var(--color-error);
}

.card-warning:hover {
    box-shadow: 0 4px 16px rgba(239, 68, 68, 0.1);
}

.card-warning h3 {
    color: var(--color-error);
}

/* --- Card: Gradient tint (subtle branded background) --- */
.card-tint-cyan {
    background: linear-gradient(180deg, rgba(34, 211, 238, 0.04) 0%, var(--color-surface-primary) 60%);
}

.card-tint-purple {
    background: linear-gradient(180deg, rgba(168, 85, 247, 0.04) 0%, var(--color-surface-primary) 60%);
}

.card-tint-magenta {
    background: linear-gradient(180deg, rgba(232, 121, 249, 0.04) 0%, var(--color-surface-primary) 60%);
}

/* --- Content slots --- */
.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

.card-header-stacked {
    flex-direction: column;
    align-items: flex-start;
}

.card-body {
    flex: 1;
}

.card-body p {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin: 0;
}

.card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    margin-top: auto;
    padding-top: var(--space-sm);
    border-top: 1px solid var(--color-border-subtle);
}

.card-meta {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

/* --- Card title --- */
.card-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 0 0 var(--space-sm) 0;
    line-height: 1.3;
}

/* --- Card icon slot --- */
.card-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-bottom: var(--space-md);
}

.card-icon-cyan {
    background: rgba(34, 211, 238, 0.12);
    color: var(--color-brand-primary);
}

.card-icon-magenta {
    background: rgba(232, 121, 249, 0.12);
    color: var(--color-brand-secondary);
}

.card-icon-purple {
    background: rgba(168, 85, 247, 0.12);
    color: #a855f7;
}

/* --- Compact card variant --- */
.card-compact {
    padding: var(--space-md);
}


/* =================================================================
   3. BADGES

   Base:       .badge
   Severity:   .badge-critical, .badge-high, .badge-medium, .badge-low, .badge-info
   Stream:     .badge-stream, .badge-stream-s1 ... .badge-stream-s4
   Status:     .badge-status, .badge-published, .badge-draft, .badge-final
   Style:      .badge-outline, .badge-pill
   Size:       .badge-sm, .badge-lg
   ================================================================= */

/* --- Base badge --- */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    font-size: 0.6875rem;             /* 11px */
    font-weight: 700;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: var(--radius-sm);
    white-space: nowrap;
    vertical-align: middle;
    border: 1px solid transparent;
}

/* --- Severity badges --- */
.badge-critical {
    background: #ef4444;
    color: #ffffff;
    border-color: #ef4444;
}

.badge-high {
    background: #f97316;
    color: #ffffff;
    border-color: #f97316;
}

.badge-medium {
    background: #eab308;
    color: #0f172a;
    border-color: #eab308;
}

.badge-low {
    background: #22c55e;
    color: #0f172a;
    border-color: #22c55e;
}

.badge-info {
    background: var(--color-info, #3b82f6);
    color: #ffffff;
    border-color: var(--color-info, #3b82f6);
}

/* Severity badges: subtle/muted variant (for dark backgrounds, less visual weight) */
.badge-critical-subtle {
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.25);
}

.badge-high-subtle {
    background: rgba(249, 115, 22, 0.12);
    color: #f97316;
    border-color: rgba(249, 115, 22, 0.25);
}

.badge-medium-subtle {
    background: rgba(234, 179, 8, 0.12);
    color: #eab308;
    border-color: rgba(234, 179, 8, 0.25);
}

.badge-low-subtle {
    background: rgba(34, 197, 94, 0.12);
    color: #22c55e;
    border-color: rgba(34, 197, 94, 0.25);
}

.badge-info-subtle {
    background: rgba(59, 130, 246, 0.12);
    color: #3b82f6;
    border-color: rgba(59, 130, 246, 0.25);
}

/* --- Research stream badges --- */
.badge-stream {
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-weight: 600;
}

.badge-stream-s1 {
    background: rgba(167, 139, 250, 0.12);
    color: #a78bfa;
    border-color: rgba(167, 139, 250, 0.25);
}

.badge-stream-s2 {
    background: rgba(34, 211, 238, 0.12);
    color: #22d3ee;
    border-color: rgba(34, 211, 238, 0.25);
}

.badge-stream-s3 {
    background: rgba(251, 146, 60, 0.12);
    color: #fb923c;
    border-color: rgba(251, 146, 60, 0.25);
}

.badge-stream-s4 {
    background: rgba(244, 114, 182, 0.12);
    color: #f472b6;
    border-color: rgba(244, 114, 182, 0.25);
}

/* --- Status badges --- */
.badge-status {
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.badge-published {
    background: rgba(34, 197, 94, 0.12);
    color: #22c55e;
    border-color: rgba(34, 197, 94, 0.25);
}

.badge-draft {
    background: rgba(234, 179, 8, 0.12);
    color: #eab308;
    border-color: rgba(234, 179, 8, 0.25);
}

.badge-final {
    background: rgba(56, 189, 248, 0.12);
    color: #38bdf8;
    border-color: rgba(56, 189, 248, 0.25);
}

/* --- ID/mono badge (advisory IDs, CVEs) --- */
.badge-mono {
    font-family: var(--font-mono);
    letter-spacing: 0.04em;
    text-transform: none;
}

.badge-id {
    font-family: var(--font-mono);
    background: rgba(56, 189, 248, 0.12);
    color: var(--color-brand-primary);
    border-color: rgba(56, 189, 248, 0.25);
    text-transform: none;
    letter-spacing: 0.02em;
}

.badge-cvss {
    font-family: var(--font-mono);
    background: rgba(255, 255, 255, 0.06);
    color: var(--color-text-primary);
    border-color: var(--color-border-subtle);
    text-transform: none;
}

/* --- Outline badge (ghost variant) --- */
.badge-outline {
    background: transparent;
}

.badge-outline.badge-critical { background: transparent; color: #ef4444; }
.badge-outline.badge-high     { background: transparent; color: #f97316; }
.badge-outline.badge-medium   { background: transparent; color: #eab308; }
.badge-outline.badge-low      { background: transparent; color: #22c55e; }
.badge-outline.badge-info     { background: transparent; color: #3b82f6; }

/* --- Pill shape (full-radius, used for tags/filters) --- */
.badge-pill {
    border-radius: var(--radius-full);
    padding: 3px 10px;
}

/* --- TLP badges (intel classification) --- */
.badge-tlp-white {
    background: rgba(241, 245, 249, 0.12);
    color: #f1f5f9;
    border-color: rgba(241, 245, 249, 0.25);
}

.badge-tlp-green {
    background: rgba(34, 197, 94, 0.12);
    color: #22c55e;
    border-color: rgba(34, 197, 94, 0.25);
}

.badge-tlp-amber {
    background: rgba(245, 158, 11, 0.12);
    color: #f59e0b;
    border-color: rgba(245, 158, 11, 0.25);
}

.badge-tlp-red {
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.25);
}

/* --- Brand sub-badges --- */
.badge-labs {
    background: rgba(34, 211, 238, 0.15);
    color: var(--color-accent-labs);
    border-color: rgba(34, 211, 238, 0.25);
}

.badge-defend {
    background: rgba(232, 121, 249, 0.15);
    color: var(--color-accent-defend);
    border-color: rgba(232, 121, 249, 0.25);
}

/* --- Size modifiers --- */
.badge-sm {
    padding: 1px 6px;
    font-size: 0.6rem;
    gap: 3px;
}

.badge-lg {
    padding: 4px 12px;
    font-size: 0.8125rem;
    gap: 6px;
}

/* --- Dot indicator (inline colored dot before text) --- */
.badge-dot::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: var(--radius-full);
    background: currentColor;
    flex-shrink: 0;
}


/* =================================================================
   4. EYEBROW — brand color variants
   ================================================================= */

.eyebrow-enterprise {
    color: var(--color-brand-primary);
}


/* =================================================================
   5. REDUCED MOTION
   ================================================================= */
@media (prefers-reduced-motion: reduce) {
    .btn,
    .card,
    .card-interactive {
        transition: none !important;
    }

    .btn[aria-busy="true"]::after {
        animation: none;
    }

    .btn-glow {
        animation: none;
    }
}