/**
 * ContiSure shared UI tokens — one visual language for public landing + portal.
 * Load in index.html (portal) and landing.html before page-specific CSS.
 */
:root {
    --cs-font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    --cs-ink: #0f172a;
    --cs-body: #334155;
    --cs-muted: #64748b;
    --cs-line: rgba(15, 23, 42, 0.1);
    --cs-border: #e2e8f0;
    --cs-surface: #ffffff;
    --cs-canvas: #e8ebe6;
    --cs-canvas-tint: #f1f5f9;

    --cs-accent: #ffa500;
    --cs-accent-strong: #d88900;
    --cs-accent-ink: #141c22;
    --cs-accent-bar: linear-gradient(90deg, #ffa500 0%, #d88900 100%);

    --cs-radius-sm: 10px;
    --cs-radius-md: 12px;
    --cs-radius-lg: 16px;

    --cs-shadow-card: 0 1px 2px rgba(15, 23, 42, 0.04), 0 16px 40px -12px rgba(15, 23, 42, 0.12);
    --cs-shadow-soft: 0 1px 2px rgba(15, 23, 42, 0.06);

    /* Legacy landing bridge (navbar, hero, contact) */
    --conti-yellow: var(--cs-accent);
    --conti-yellow-dark: var(--cs-accent-strong);
}

.cs-btn-accent {
    background: var(--cs-accent);
    border: 1px solid var(--cs-accent);
    border-radius: 999px;
    color: var(--cs-accent-ink);
    font-weight: 700;
    letter-spacing: 0.01em;
    box-shadow: 0 2px 10px rgba(255, 165, 0, 0.3);
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.cs-btn-accent:hover {
    background: var(--cs-accent-strong);
    border-color: var(--cs-accent-strong);
    color: var(--cs-accent-ink);
    box-shadow: 0 4px 14px rgba(255, 165, 0, 0.35);
}

.cs-btn-accent:focus-visible {
    outline: 2px solid var(--cs-accent-strong);
    outline-offset: 3px;
}

/* Clearable search/filter inputs — see _common.makeSearchInputClearable() in common.js */
.cs-clearable-search-wrap {
    position: relative;
}

.cs-clearable-search-wrap .form-control {
    padding-right: 2rem;
}

.cs-clearable-search-clear {
    display: none;
    position: absolute;
    top: 50%;
    right: 0.5rem;
    transform: translateY(-50%);
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--cs-muted, #64748b);
    cursor: pointer;
    line-height: 1;
    font-size: 0.85rem;
}

.cs-clearable-search-clear:hover {
    color: var(--cs-ink, #0f172a);
}
