/* MotorLaps design system — tokens, typography, layout reset, accent utilities */

:root {
    /* Brand */
    --primary-orange: #ee8027;
    --primary-orange-hover: #d6711f;
    --primary-orange-muted: rgba(238, 128, 39, 0.1);
    --primary-red: #e63946;

    /* Neutrals */
    --dark-gray: #454845;
    --light-gray: #666666;
    --background-white: #ffffff;
    --background-light: #f5f5f5;
    --text-black: #1a1a1a;
    --text-gray: #666666;
    --border-light: #e0e0e0;

    /* Typography */
    --font-heading: 'Space Grotesk', system-ui, sans-serif;
    --font-body: 'Inter', system-ui, sans-serif;

    --text-h1-size: 2rem;
    --text-h1-weight: 700;
    --text-h1-tracking: -0.5px;
    --text-h1-line: 1.2;

    --text-h2-size: 1.25rem;
    --text-h2-weight: 600;
    --text-h2-tracking: -0.5px;
    --text-h2-line: 1.3;

    --text-body-size: 0.9375rem;
    --text-body-weight: 400;
    --text-body-line: 1.6;

    --text-label-size: 0.75rem;
    --text-label-weight: 500;
    --text-label-tracking: 0.04em;

    /* Layout */
    --radius: 0;
    --border-width: 1px;
    --page-bg: #ffffff;

    /* Custom thumb icons (public/images/) */
    --ml-thumb-icon-size: 1.25rem;
    --ml-thumb-icon-size-title: 2.05rem;
    --ml-thumb-icon-size-podium: 2.8125rem;
    --ml-thumb-flag-width: 2rem;
    --ml-thumb-flag-height: 1.5rem;

    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Base typography */
html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    font-size: var(--text-body-size);
    font-weight: var(--text-body-weight);
    line-height: var(--text-body-line);
    color: var(--text-black);
    background: var(--page-bg);
}

h1,
.ml-h1 {
    font-family: var(--font-heading);
    font-size: var(--text-h1-size);
    font-weight: var(--text-h1-weight);
    letter-spacing: var(--text-h1-tracking);
    line-height: var(--text-h1-line);
    color: var(--text-black);
}

h2,
.ml-h2 {
    font-family: var(--font-heading);
    font-size: var(--text-h2-size);
    font-weight: var(--text-h2-weight);
    letter-spacing: var(--text-h2-tracking);
    line-height: var(--text-h2-line);
    color: var(--text-black);
}

h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    font-weight: var(--text-h2-weight);
    letter-spacing: var(--text-h2-tracking);
    line-height: var(--text-h2-line);
    color: var(--text-black);
}

label,
.ml-label,
.hub-main table thead th,
.hub-main table thead td,
.ml-table thead th {
    font-family: var(--font-body);
    font-size: var(--text-label-size);
    font-weight: var(--text-label-weight);
    letter-spacing: var(--text-label-tracking);
}

/* Sharp corners — UI chrome only (status dots stay round) */
button,
input,
select,
textarea,
optgroup,
fieldset,
legend,
.hub-main [class*='-card'],
.hub-main [class*='-btn'],
.hub-main [class*='-panel'],
.hub-main [class*='-modal'],
.hub-main [class*='-row']:not(.page-title-row),
.hub-main [class*='-banner'],
.hub-main [class*='-hero'],
.hub-main [class*='-badge'],
.hub-main [class*='-cta'],
.hub-main [class*='-nav__link'],
.auth-card,
.mp-explainer-card,
.ml-btn,
.ml-card,
.ml-pagination__btn,
.ml-pagination__list a,
.ml-pagination__list span,
.nav__auth-link,
.nav__social-link,
.rules-info-link,
.races-series-nav__link,
.admin-schedule-utc-panel,
.series-description,
.series-races-list,
.series-races-list__link,
.race-show-schedule,
.race-show-participants,
.race-show-reminders,
.race-show-mp-rules,
.race-show-launch-block,
.race-show-guest-card,
.race-show-guest-card__badge,
.race-show-guest-card__cta,
.race-steam-join,
.race-show-cancel-modal,
.launcher-hub-banner,
.driver-profile__card,
.driver-profile__stats,
.driver-profile__stat {
    border-radius: var(--radius) !important;
}

/* Flat surfaces — no depth tricks */
.nav-wrapper,
.auth-card,
.mp-explainer-card,
.hub-promo-card,
.hub-series-card,
.series-banner,
.series-index-row,
.races-index-row,
.race-show-hero,
.race-show-actions-panel,
.race-show-guest-card,
.race-show-cancel-modal,
.hub-promo-images__item,
.ml-card,
.driver-profile__card,
.driver-profile__stats {
    box-shadow: none !important;
}

.hub-promo-card--telemetry:hover,
.hub-series-card:hover,
.series-banner:hover,
.hub-promo-images__item:hover {
    box-shadow: none !important;
}

/* Focus without glow shadows */
.auth-form input[type='text']:focus,
.auth-form input[type='email']:focus,
.auth-form input[type='password']:focus,
.hub-main input:focus,
.hub-main select:focus,
.hub-main textarea:focus {
    box-shadow: none !important;
    outline: 2px solid var(--primary-orange);
    outline-offset: 0;
}

.auth-form .auth-fieldset .radio-option label:has(input:checked) {
    box-shadow: none !important;
    border-color: var(--primary-orange);
}

/* Cards and panels */
.ml-card {
    border: var(--border-width) solid var(--border-light);
    background: var(--background-white);
    padding: 0.75rem 1rem;
}

.ml-btn {
    display: inline-block;
    padding: 0.5rem 1rem;
    font-family: var(--font-body);
    font-size: var(--text-body-size);
    font-weight: var(--text-label-weight);
    line-height: 1.4;
    color: var(--text-black);
    text-decoration: none;
    background: var(--background-white);
    border: var(--border-width) solid var(--border-light);
    cursor: pointer;
    transition: border-color 0.2s var(--ease-out), background 0.2s var(--ease-out);
}

.ml-btn:hover {
    border-color: var(--text-gray);
    background: var(--background-light);
}

/* Orange accent — restricted use */
.ml-accent-position {
    color: var(--primary-orange);
    font-weight: 700;
}

.ml-accent-points,
.ml-accent-points-positive {
    color: var(--primary-orange);
    font-weight: 600;
}

.ml-accent-user,
.hub-main tr.is-current-user,
.hub-main tr.ml-accent-user {
    background: var(--primary-orange-muted) !important;
}

.ml-accent-section {
    border-left: 3px solid var(--primary-orange);
    padding-left: 0.7rem;
}

/* Hub content typography alignment */
.hub-main {
    font-size: var(--text-body-size);
}

.hub-main > h1,
.hub-main > h2,
.hub-main > section > h2 {
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}

.hub-main > h1:first-child,
.hub-main > .hub-garage:first-child .hub-garage__title,
.hub-main > .page-title-row:first-child h1 {
    margin-top: 0;
}

.hub-main table {
    border-collapse: collapse;
}

.hub-main table th,
.hub-main table td,
.ml-table th,
.ml-table td {
    border: var(--border-width) solid var(--border-light);
}

.hub-main table thead th {
    text-transform: uppercase;
    color: var(--text-gray);
    background: var(--background-white);
    border-bottom: var(--border-width) solid var(--border-light);
}

/* Section dividers */
.hub-main > hr,
.ml-divider {
    border: 0;
    border-top: var(--border-width) solid var(--border-light);
    margin: 2rem 0;
}

/* Admin / rf2 inline tables */
.ml-table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
    font-size: var(--text-body-size);
}

.ml-table th,
.ml-table td {
    padding: 0.35rem 0.5rem;
    text-align: left;
    vertical-align: top;
}

.ml-table thead tr {
    background: var(--background-white);
}

.ml-table tbody tr {
    border-top: var(--border-width) solid var(--border-light);
}

.ml-table tbody tr.is-selected,
.ml-table tbody tr.is-highlighted {
    background: var(--primary-orange-muted);
}

.ml-table th.text-right,
.ml-table td.text-right {
    text-align: right;
}

/* Thumb icons — reuse on any page (max 2 types per page by convention) */
.ml-thumb-icon {
    flex-shrink: 0;
    width: var(--ml-thumb-icon-size);
    height: var(--ml-thumb-icon-size);
    object-fit: contain;
    vertical-align: middle;
}

.ml-thumb-icon--title {
    width: var(--ml-thumb-icon-size-title);
    height: var(--ml-thumb-icon-size-title);
}

.ml-thumb-icon--podium {
    width: var(--ml-thumb-icon-size-podium);
    height: var(--ml-thumb-icon-size-podium);
}

.ml-thumb-flag {
    width: var(--ml-thumb-flag-width);
    height: var(--ml-thumb-flag-height);
    object-fit: cover;
    border: var(--border-width) solid var(--border-light);
    border-radius: 0 !important;
    flex-shrink: 0;
    display: block;
}