# Capnis brand tokens and button tints

/* Brand tokens (--capnis-* colours). Typography tokens live in capnis-typography.css (+ --tp-ff-* remapped there). */
:root,
html.capnis-light {
    --tp-ff-fontawesome: "Font Awesome 6 Free";
    /* Monochrome light palette */
    --capnis-ink: #0a0a0a;
    --capnis-slate: #52525b;
    --capnis-border: rgba(0, 0, 0, 0.12);

    --capnis-primary: #0a0a0a;
    --capnis-primary-2: #27272a;
    --capnis-accent: #0a0a0a;
    --capnis-accent-2: #71717a;

    --capnis-surface: #ffffff;
    --capnis-surface-2: #f4f4f5;
    --capnis-surface-3: #ebebec;
    --capnis-shadow: rgba(0, 0, 0, 0.08);
    --capnis-glow: none;
    --capnis-btn-ink: #ffffff;
    --capnis-circuit: rgba(0, 0, 0, 0.035);
    --capnis-band: #0a0a0a;
    --capnis-band-ink: #fafafa;

    /* Back-compat (used across existing overrides) */
    --capnis-logo-black: var(--capnis-primary);
    --capnis-logo-hover: var(--capnis-primary-2);
}

html.capnis-dark {
    --capnis-ink: #f5f5f5;
    --capnis-slate: #a1a1aa;
    --capnis-border: rgba(255, 255, 255, 0.14);

    --capnis-primary: #f5f5f5;
    --capnis-primary-2: #e4e4e7;
    --capnis-accent: #f5f5f5;
    --capnis-accent-2: #71717a;

    --capnis-surface: #0a0a0a;
    --capnis-surface-2: #141414;
    --capnis-surface-3: #1f1f1f;
    --capnis-shadow: rgba(0, 0, 0, 0.5);
    --capnis-glow: 0 0 12px rgba(255, 255, 255, 0.25);
    --capnis-btn-ink: #0a0a0a;
    --capnis-circuit: rgba(255, 255, 255, 0.045);
    --capnis-band: #f4f4f5;
    --capnis-band-ink: #0a0a0a;

    --capnis-logo-black: var(--capnis-primary);
    --capnis-logo-hover: var(--capnis-primary-2);

    --tp-common-black: var(--capnis-ink);
    --tp-text-body: var(--capnis-slate);
    --tp-grey-1: var(--capnis-surface-2);
    --tp-grey-2: var(--capnis-surface-3);
    --tp-grey-3: var(--capnis-surface-2);
    --tp-border-1: var(--capnis-border);
    --tp-border-2: var(--capnis-border);
}

/* Theme "pill" button component */
.tp-btn-black .tp-btn-black-text,
.tp-btn-black .tp-btn-black-circle {
    background-color: var(--capnis-logo-black) !important;
}
.tp-btn-black:hover .tp-btn-black-text,
.tp-btn-black:hover .tp-btn-black-circle,
.tp-btn-black:focus .tp-btn-black-text,
.tp-btn-black:focus .tp-btn-black-circle {
    background-color: var(--capnis-logo-hover) !important;
}
.tp-btn-black .tp-btn-black-text,
.tp-btn-black .tp-btn-black-circle,
.tp-btn-black .tp-btn-black-circle svg {
    color: var(--capnis-btn-ink) !important;
}

/* Common outline buttons in the template */
.tp-btn-sky-border,
.tp-btn-red-border,
.tp-btn-white-border,
.tp-btn-border,
.pbmit-button {
    border-color: var(--capnis-logo-black) !important;
    color: var(--capnis-logo-black) !important;
}
.tp-btn-sky-border:hover,
.tp-btn-red-border:hover,
.tp-btn-white-border:hover,
.tp-btn-border:hover,
.pbmit-button:hover {
    background-color: var(--capnis-logo-hover) !important;
    border-color: var(--capnis-logo-hover) !important;
    color: var(--capnis-btn-ink) !important;
}

/*
 * Sitewide “Customer Login” button DNA (pill label + trailing circular control).
 * Filled primary: header-style markup uses .tp-btn-black.btn-red-bg — global rules above color it.
 * Fallback: anchors that only include .tp-btn-black-text get a synthetic arrow circle.
 * Outline secondaries: border pills get a matching circular cap (same silhouette as the filled variant).
 */
main .tp-btn-black.btn-red-bg:not(:has(.tp-btn-black-circle)) {
    display: inline-flex !important;
    align-items: stretch;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
    vertical-align: middle;
}

main .tp-btn-black.btn-red-bg:not(:has(.tp-btn-black-circle)) .tp-btn-black-text {
    display: inline-block;
    padding: 7px 22px;
    border-radius: 9999px;
    font-size: 16px;
    font-weight: 500;
    background-color: var(--capnis-logo-black) !important;
    color: var(--capnis-btn-ink) !important;
}

main .tp-btn-black.btn-red-bg:not(:has(.tp-btn-black-circle))::after {
    content: "";
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    align-self: center;
    margin-left: -4px;
    border-radius: 9999px;
    background-color: var(--capnis-logo-black);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' fill='none'%3E%3Cpath stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M1 9L9 1M9 1H1M9 1V9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    transition: transform 0.9s cubic-bezier(0.135, 0.9, 0.15, 1), background-color 0.25s ease;
}

main .tp-btn-black.btn-red-bg:not(:has(.tp-btn-black-circle)):hover .tp-btn-black-text {
    background-color: var(--capnis-logo-hover) !important;
}

main .tp-btn-black.btn-red-bg:not(:has(.tp-btn-black-circle)):hover::after {
    background-color: var(--capnis-logo-hover);
    transform: translateX(12px) rotate(45deg);
}

main :is(a, button).tp-btn-border:not(.pd-btn-invert),
main :is(a, button).tp-btn-sky-border,
main :is(a, button).tp-btn-red-border {
    display: inline-flex !important;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0;
    padding: 6px 6px 6px 22px !important;
    border-radius: 9999px !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    letter-spacing: -0.02em !important;
    line-height: 1.25 !important;
    border-width: 1.5px !important;
    border-style: solid !important;
    transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

main :is(a, button).tp-btn-border:not(.pd-btn-invert)::after,
main :is(a, button).tp-btn-sky-border::after,
main :is(a, button).tp-btn-red-border::after {
    content: "";
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    margin-left: 6px;
    border-radius: 50%;
    border: 1.5px solid currentColor;
    box-sizing: border-box;
    transition: transform 0.9s cubic-bezier(0.135, 0.9, 0.15, 1), background-color 0.25s ease, border-color 0.25s ease;
}

main :is(a, button).tp-btn-border:not(.pd-btn-invert):hover::after,
main :is(a, button).tp-btn-sky-border:hover::after,
main :is(a, button).tp-btn-red-border:hover::after {
    transform: translateX(10px) rotate(45deg);
}

.project-detail-page .pd-section--dark .tp-btn-border.pd-btn-invert {
    display: inline-flex !important;
    align-items: center;
    padding: 6px 6px 6px 22px !important;
    border-radius: 9999px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
}

.project-detail-page .pd-section--dark .tp-btn-border.pd-btn-invert::after {
    content: "";
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    margin-left: 6px;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, 0.55);
    box-sizing: border-box;
    transition: transform 0.9s cubic-bezier(0.135, 0.9, 0.15, 1);
}

.project-detail-page .pd-section--dark .tp-btn-border.pd-btn-invert:hover::after {
    transform: translateX(10px) rotate(45deg);
    border-color: rgba(255, 255, 255, 0.92);
}

/* Generic Bootstrap-like buttons on frontend */
.page-content .btn,
.page-content button.btn,
.page-content input[type="submit"].btn {
    background-color: var(--capnis-logo-black) !important;
    border-color: var(--capnis-logo-black) !important;
    color: var(--capnis-btn-ink) !important;
}
.page-content .btn:hover,
.page-content button.btn:hover,
.page-content input[type="submit"].btn:hover {
    background-color: var(--capnis-logo-hover) !important;
    border-color: var(--capnis-logo-hover) !important;
}

/* Links + focus ring (site-wide) */
.page-content a:not(.btn):not(.tp-btn-black):not(.tp-btn-border):not(.tp-btn-sky-border):not(.tp-btn-red-border):not(.tp-btn-white-border) {
    color: var(--capnis-primary-2);
}
.page-content a:not(.btn):hover {
    color: var(--capnis-ink);
}

.page-content :focus-visible {
    outline: 3px solid var(--capnis-accent-2);
    outline-offset: 3px;
}

/* Accents used across template tags/badges */
.badge,
.tp-section-subtitle.pre,
.tp-section-subtitle.border-bg {
    border-color: var(--capnis-border);
}

/* Optional: harmonize template “green” accents to Capnis lime */
:root {
    --tp-theme-green: var(--capnis-accent);
    --tp-common-green-regular: var(--capnis-accent);
    --tp-common-yellow-green: var(--capnis-accent);
    --tp-common-green-light: var(--capnis-ink);
    --tp-common-yellow-1: var(--capnis-ink);
}