/* redLplates brand tokens */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;800;900&display=swap');

:root {
    /* Colour */
    --rl-plate-red: #d4141e; /* primary, CTAs, logo "red" */
    --rl-plate-red-dark: #a50e16; /* hover / pressed, red text on white bands */
    --rl-plate-red-bright: #ff4a52; /* "red" on dark backgrounds only */
    --rl-plate-red-tint: #fbe8e9; /* lesson blocks, icon tiles */
    --rl-tarmac: #141414; /* text, dark panels, footer */
    --rl-plate-white: #ffffff; /* ground */
    --rl-badge-green: #00703c; /* success, test passes */
    --rl-badge-green-dark: #00502b;
    --rl-badge-green-tint: #e2f1e9;
    --rl-kerb-grey: #f4f5f7; /* surfaces, alternate sections */
    --rl-line: #e4e5e8; /* borders */
    --rl-text-muted: #4a4a4a; /* secondary text (passes AA on white and kerb grey) */
    --rl-text-body: #3a3a3a;

    /* Type */
    --rl-font: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
    --rl-weight-display: 900;
    --rl-weight-heading: 800;
    --rl-weight-ui: 600;
    --rl-weight-body: 400;
    --rl-size-hero: clamp(40px, 5vw, 64px);
    --rl-size-h2: clamp(32px, 4vw, 44px);
    --rl-size-h3: 20px;
    --rl-size-lead: 20px;
    --rl-size-body: 16px;
    --rl-size-small: 14px;
    --rl-tracking-display: -0.035em;

    /* Shape & space */
    --rl-radius-sm: 10px;
    --rl-radius-md: 12px;
    --rl-radius-lg: 20px;
    --rl-container: 1200px;
    --rl-section-pad: 88px;
}

body {
    margin: 0;
    font-family: var(--rl-font);
    color: var(--rl-tarmac);
    background: var(--rl-plate-white);
}
a {
    color: var(--rl-plate-red);
}
a:hover {
    color: var(--rl-plate-red-dark);
}
:focus-visible {
    outline: 3px solid var(--rl-plate-red);
    outline-offset: 3px;
    border-radius: 4px;
}

.rl-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    box-sizing: border-box;
    font: var(--rl-weight-ui) 18px/1 var(--rl-font);
    padding: 16px 26px;
    border-radius: var(--rl-radius-md);
    text-decoration: none;
}
.rl-btn--primary {
    background: var(--rl-plate-red);
    color: #fff;
}
.rl-btn--primary:hover {
    background: var(--rl-plate-red-dark);
    color: #fff;
}
.rl-btn--secondary {
    background: #fff;
    color: var(--rl-tarmac);
    border: 2px solid var(--rl-tarmac);
    padding: 14px 24px;
}
.rl-btn--secondary:hover {
    background: var(--rl-kerb-grey);
    color: var(--rl-tarmac);
}

@media (prefers-reduced-motion: reduce) {
    * {
        scroll-behavior: auto !important;
    }
}
html {
    scroll-behavior: smooth;
}