/* ================================================================
   COMPONENT LIBRARY  —  CalcLabs v2
   Organized by component. Each block is self-contained.
   ================================================================ */


/* ──────────────────────────────────────────────────────────────
   C-BTN  button primitive
   ────────────────────────────────────────────────────────────── */
.c-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0.55rem 1.25rem;
    border-radius: var(--radius);
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: 0.01em;
    cursor: pointer;
    text-decoration: none;
    border: 1px solid transparent;
    transition: background 0.12s, border-color 0.12s, color 0.12s, transform 0.1s;
    white-space: nowrap;
}

.c-btn:hover {
    transform: translateY(-1px);
}

.c-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

/* Primary: solid accent fill */
.c-btn--primary {
    background: var(--accent);
    color: var(--text-on-accent);
    border-color: var(--accent);
}

.c-btn--primary:hover {
    background: #7ecde6;
    border-color: #7ecde6;
    color: var(--text-on-accent);
}

/* Ghost: transparent with accent border */
.c-btn--ghost {
    background: transparent;
    color: var(--accent);
    border-color: var(--accent-dim);
}

.c-btn--ghost:hover {
    background: var(--accent-glow);
    border-color: var(--accent);
    color: var(--accent);
}

/* Muted: subtle surface */
.c-btn--muted {
    background: var(--bg-raised);
    color: var(--text-secondary);
    border-color: var(--border);
}

.c-btn--muted:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
    border-color: var(--border-mid);
}

.c-btn--sm {
    padding: 0.35rem 0.85rem;
    font-size: var(--text-xs);
}

.c-btn--lg {
    padding: 0.75rem 1.75rem;
    font-size: var(--text-md);
}

.c-btn i {
    font-size: 1em;
}


/* ──────────────────────────────────────────────────────────────
   C-TAG  label/badge primitive
   ────────────────────────────────────────────────────────────── */
.c-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.6rem;
    border-radius: var(--radius-sm);
    background: var(--bg-raised);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 0.04em;
    white-space: nowrap;
}

/* Accent variant */
.c-tag--accent {
    background: var(--accent-glow);
    border-color: var(--accent-line);
    color: var(--accent);
}

/* Status variants */
.c-tag--wip {
    background: rgba(212, 145, 74, 0.1);
    border-color: rgba(212, 145, 74, 0.3);
    color: var(--status-wip);
}

.c-tag--released {
    background: rgba(91, 186, 111, 0.1);
    border-color: rgba(91, 186, 111, 0.3);
    color: var(--status-released);
}


/* ──────────────────────────────────────────────────────────────
   C-CARD  surface container
   ────────────────────────────────────────────────────────────── */
.c-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: border-color 0.15s, transform 0.15s;
}

.c-card:hover {
    border-color: var(--border-mid);
}

.c-card--lift:hover {
    transform: translateY(-3px);
    border-color: var(--accent-dim);
}

/* Inset: used for code blocks, terminals, data areas */
.c-card--inset {
    background: var(--bg);
    border-color: var(--border);
}

/* Accent left-border: for callouts, featured items */
.c-card--accent-left {
    border-left: 3px solid var(--accent);
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}


/* ──────────────────────────────────────────────────────────────
   C-STAT  metric display (number + label)
   ────────────────────────────────────────────────────────────── */
.c-stat {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.c-stat__value {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.c-stat__label {
    font-size: var(--text-xs);
    color: var(--text-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.c-stat--sm .c-stat__value { font-size: var(--text-xl); }
.c-stat--lg .c-stat__value { font-size: var(--text-4xl); }


/* ──────────────────────────────────────────────────────────────
   C-DIVIDER  horizontal rule with optional label
   ────────────────────────────────────────────────────────────── */
.c-divider {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    color: var(--text-muted);
    font-size: var(--text-xs);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.c-divider::before,
.c-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border);
}

.c-divider--left::before { display: none; }
.c-divider--right::after { display: none; }


/* ──────────────────────────────────────────────────────────────
   C-EYEBROW  section label above a heading
   ────────────────────────────────────────────────────────────── */
.c-eyebrow {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--accent);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* with an accent underline */
.c-eyebrow--line {
    padding-bottom: 0.4rem;
    border-bottom: 1.5px solid var(--accent-dim);
}


/* ──────────────────────────────────────────────────────────────
   C-SECTION  content section wrapper
   ────────────────────────────────────────────────────────────── */
.c-section {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.c-section__head {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.c-section__title {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--text-primary);
}

.c-section__desc {
    font-size: var(--text-md);
    color: var(--text-secondary);
    max-width: 64ch;
    line-height: 1.7;
}


/* ──────────────────────────────────────────────────────────────
   C-TERMINAL  dark inset code/terminal block
   ────────────────────────────────────────────────────────────── */
.c-terminal {
    background: #0d1014;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    font-family: var(--font-mono);
    font-size: var(--text-sm);
}

.c-terminal__bar {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0.55rem var(--space-4);
    background: #13181c;
    border-bottom: 1px solid var(--border);
}

.c-terminal__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--border-mid);
}

.c-terminal__dot:nth-child(1) { background: #e05252; }
.c-terminal__dot:nth-child(2) { background: #d4914a; }
.c-terminal__dot:nth-child(3) { background: #5bba6f; }

.c-terminal__title {
    flex: 1;
    text-align: center;
    font-size: var(--text-xs);
    color: var(--text-muted);
    letter-spacing: 0.06em;
}

.c-terminal__body {
    padding: var(--space-4) var(--space-5);
    color: #c8d0d8;
    line-height: 1.8;
    overflow-x: auto;
}

.c-terminal__line--prompt::before {
    content: "› ";
    color: var(--accent);
}

.c-terminal__line--comment {
    color: var(--text-muted);
}

.c-terminal__line--ok {
    color: var(--status-released);
}

.c-terminal__line--warn {
    color: var(--status-wip);
}


/* ──────────────────────────────────────────────────────────────
   C-GRID  responsive multi-column grid helper
   ────────────────────────────────────────────────────────────── */
.c-grid {
    display: grid;
    gap: var(--space-4);
}

.c-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.c-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.c-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 900px) {
    .c-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .c-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 580px) {
    .c-grid--2,
    .c-grid--3,
    .c-grid--4 { grid-template-columns: 1fr; }
}


/* ──────────────────────────────────────────────────────────────
   C-INLINE-CODE  inline code snippet
   ────────────────────────────────────────────────────────────── */
.c-code {
    font-family: var(--font-mono);
    font-size: 0.88em;
    color: var(--accent);
    background: var(--accent-glow);
    border: 1px solid var(--accent-line);
    border-radius: var(--radius-sm);
    padding: 0.1em 0.4em;
}


/* ──────────────────────────────────────────────────────────────
   C-GITHUB-STAT  compact repo metric chip
   ────────────────────────────────────────────────────────────── */
.c-github-stat {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 0.2rem 0.65rem;
    background: var(--bg-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-variant-numeric: tabular-nums;
}

.c-github-stat i {
    color: var(--accent);
    font-size: 0.9em;
}