/**
 * Reversal — global theme tokens
 * Single source of truth for color, typography, spacing, and surfaces.
 * Light, enterprise-SaaS palette: blue / white / slate-gray with strong,
 * WCAG-AA contrast on every surface tier (white, elevated, and deep).
 */
:root {
    /* --- Surfaces (page wash → cards) --- */
    --rvl-bg: #FFFFFF;
    --rvl-bg-elevated: #F7F9FC;
    --rvl-bg-deep: #EEF2F8;
    --rvl-bg-card: #FFFFFF;
    --rvl-bg-card-hover: #F5F8FC;
    --rvl-border: #E2E8F0;
    --rvl-border-strong: #CBD5E1;
    --rvl-border-subtle: rgba(203, 213, 225, 0.6);

    /* --- Text roles (all AA on white AND on tinted alt/deep surfaces) ---
       text     : headings, primary copy        (#0F172A ~16:1)
       muted    : body / secondary copy          (#334155 ~10:1)
       subtle   : smallest helper/meta text      (#475569 ~7:1)
       Never use a value lighter than --rvl-text-subtle for readable text. */
    --rvl-text: #0F172A;
    --rvl-text-muted: #334155;
    --rvl-text-subtle: #475569;

    /* --- Brand (kept) --- */
    --rvl-blue: #0066CC;
    --rvl-blue-dark: #0052A8;
    --rvl-blue-bright: #0066CC;
    --rvl-blue-soft: rgba(0, 102, 204, 0.08);
    --rvl-blue-glow: rgba(0, 102, 204, 0.18);

    /* --- Slate accents ---
       silver     : dark UI accent / strong labels (#1E293B)
       silver-mid : eyebrows, section labels        (#475569 ~7:1)
       silver-dim : small uppercase labels + decorative marks (#5A6473 ~5.3:1) */
    --rvl-silver: #1E293B;
    --rvl-silver-mid: #475569;
    --rvl-silver-dim: #5A6473;
    --rvl-silver-soft: rgba(15, 23, 42, 0.04);

    /* --- State colors --- */
    --rvl-success: #166534;
    --rvl-success-bg: #ECFDF3;
    --rvl-success-border: #BBF7D0;
    --rvl-danger: #991B1B;
    --rvl-danger-bg: #FEF2F2;
    --rvl-danger-border: #FECACA;

    --rvl-accent: var(--rvl-blue);
    --rvl-accent-hover: var(--rvl-blue-dark);
    --rvl-accent-soft: var(--rvl-blue-soft);
    --rvl-accent-glow: var(--rvl-blue-glow);

    /* --- Form fields --- */
    --rvl-input-bg: #FFFFFF;
    --rvl-placeholder: #64748B;

    --rvl-dropdown: #FFFFFF;
    --rvl-header-height: 68px;
    --rvl-radius: 8px;
    --rvl-radius-lg: 12px;
    --rvl-shadow: 0 12px 40px rgba(15, 23, 42, 0.12);
    --rvl-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08);

    /* --- Typography --- */
    --rvl-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --rvl-mono: ui-monospace, 'Cascadia Code', 'Segoe UI Mono', 'SF Mono', Menlo, Consolas, monospace;
    --rvl-weight-normal: 400;
    --rvl-weight-medium: 500;
    --rvl-weight-semibold: 600;
    --rvl-weight-bold: 700;
    --rvl-leading-tight: 1.2;
    --rvl-leading-snug: 1.4;
    --rvl-leading-normal: 1.55;

    --rvl-container: 1180px;
    --rvl-container-wide: 1320px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: var(--rvl-font);
    font-size: 1rem;
    font-weight: var(--rvl-weight-normal);
    background: var(--rvl-bg);
    color: var(--rvl-text);
    line-height: var(--rvl-leading-normal);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
}

h1, h2, h3, h4, h5, h6 {
    color: var(--rvl-text);
    line-height: var(--rvl-leading-tight);
    text-wrap: balance;
}

img {
    max-width: 100%;
    height: auto;
}

a {
    color: var(--rvl-blue-bright);
}

a:hover {
    color: var(--rvl-blue-dark);
}

::selection {
    background: var(--rvl-blue-soft);
    color: var(--rvl-text);
}

:focus-visible {
    outline: 2px solid var(--rvl-blue);
    outline-offset: 2px;
}

/* Reusable table base (available for any data view) */
.rvl-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
    color: var(--rvl-text-muted);
    background: var(--rvl-bg-card);
    border: 1px solid var(--rvl-border);
    border-radius: var(--rvl-radius);
    overflow: hidden;
}

.rvl-table th {
    text-align: left;
    font-weight: var(--rvl-weight-semibold);
    color: var(--rvl-text);
    background: var(--rvl-bg-elevated);
    padding: 0.7rem 0.9rem;
    border-bottom: 1px solid var(--rvl-border);
    white-space: nowrap;
}

.rvl-table td {
    padding: 0.7rem 0.9rem;
    border-bottom: 1px solid var(--rvl-border-subtle);
}

.rvl-table tr:last-child td {
    border-bottom: none;
}

.rvl-table tbody tr:hover {
    background: var(--rvl-bg-elevated);
}

.container {
    width: min(100% - 2rem, var(--rvl-container));
    margin-inline: auto;
}

.container-wide {
    width: min(100% - 2rem, var(--rvl-container-wide));
    margin-inline: auto;
}

.section-label {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--rvl-silver-mid);
    margin-bottom: 0.65rem;
}

.section-title {
    font-size: clamp(1.625rem, 3.5vw, 2.25rem);
    line-height: 1.2;
    margin: 0 0 0.75rem;
    font-weight: 600;
    letter-spacing: -0.025em;
    color: var(--rvl-text);
}

.section-lead {
    font-size: 1rem;
    color: var(--rvl-text-muted);
    max-width: 56ch;
    margin: 0 0 2rem;
    line-height: 1.55;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 44px;
    padding: 0.7rem 1.25rem;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.875rem;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    letter-spacing: 0.01em;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.btn-primary {
    background: var(--rvl-blue);
    color: #fff;
    border-color: var(--rvl-blue);
}

.btn-primary:hover {
    background: var(--rvl-blue-dark);
    border-color: var(--rvl-blue-dark);
    color: #fff;
}

.btn-secondary {
    background: transparent;
    color: var(--rvl-silver);
    border-color: var(--rvl-border);
}

.btn-secondary:hover {
    background: var(--rvl-silver-soft);
    color: var(--rvl-text);
    border-color: var(--rvl-silver-dim);
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .btn { transition: none; }
}