/*
=====================================================
Rangers On Tour — Typography System V1.0
Headings: Manrope
Interface/body: Inter
=====================================================
*/

/* Google Fonts. Existing local/system fallbacks remain available if blocked. */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Manrope:wght@600;700;800&display=swap");

:root {
    --rot-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
        Roboto, Helvetica, Arial, sans-serif;
    --rot-font-heading: "Manrope", "Inter", -apple-system, BlinkMacSystemFont,
        "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    --rot-weight-regular: 400;
    --rot-weight-medium: 500;
    --rot-weight-semibold: 600;
    --rot-weight-bold: 700;
    --rot-weight-extrabold: 800;

    --rot-letter-tight: -0.025em;
    --rot-letter-heading: -0.018em;
    --rot-letter-label: 0.055em;
}

/* Main interface text */
html,
body {
    font-family: var(--rot-font-body) !important;
    font-weight: var(--rot-weight-regular);
    font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Forms and controls do not always inherit fonts naturally */
button,
input,
select,
textarea,
option {
    font-family: var(--rot-font-body) !important;
}

/* Modern, clean heading hierarchy */
h1,
h2,
h3,
h4,
h5,
h6,
.page-title,
.card-title,
.modal-title,
.hero-title,
.section-title,
.admin-page-title {
    font-family: var(--rot-font-heading) !important;
    font-weight: var(--rot-weight-extrabold);
    letter-spacing: var(--rot-letter-heading);
    line-height: 1.15;
}

h1 {
    letter-spacing: var(--rot-letter-tight);
}

h2,
h3 {
    line-height: 1.2;
}

/* Navigation and action text */
.main-nav,
.navbar,
.site-nav,
.admin-nav,
.btn,
button,
input[type="submit"],
input[type="button"],
input[type="reset"],
.badge,
.status,
.pill,
.tab,
.pagination {
    font-family: var(--rot-font-body) !important;
    font-weight: var(--rot-weight-bold);
}

/* Tables and data-heavy screens */
table,
th,
td,
.leaderboard-table,
.admin-table,
.fixtures-table {
    font-family: var(--rot-font-body) !important;
}

th,
.table-heading,
.table-header {
    font-weight: var(--rot-weight-bold);
    letter-spacing: 0.01em;
}

/* Small interface labels */
.eyebrow,
.overline,
.meta-label,
.field-label,
.stat-label,
.card-label,
small[class*="label"],
[class*="section-kicker"] {
    font-family: var(--rot-font-body) !important;
    font-weight: var(--rot-weight-bold);
    letter-spacing: var(--rot-letter-label);
    text-transform: uppercase;
}

/* Body copy */
p,
li,
label,
.help-text,
.form-text,
.card-text,
.modal-body {
    line-height: 1.55;
}

/* Numeric clarity for leaderboards, stats and scores */
.lnv6-number,
.lbv6-number,
.lbv6-points,
.stat-value,
.score,
.points,
.rank,
.countdown,
input[type="number"] {
    font-variant-numeric: tabular-nums;
}

/*
Do not override icon-font families.
This protects Font Awesome and similar icon libraries.
*/
.fa,
.fas,
.far,
.fal,
.fad,
.fab,
.fa-solid,
.fa-regular,
.fa-light,
.fa-thin,
.fa-duotone,
.fa-brands,
[class^="fa-"],
[class*=" fa-"],
.material-icons,
.material-symbols-outlined {
    font-family: inherit;
}

/* Font Awesome's own declarations must win where supplied */
.fa::before,
.fas::before,
.far::before,
.fal::before,
.fad::before,
.fab::before,
.fa-solid::before,
.fa-regular::before,
.fa-light::before,
.fa-thin::before,
.fa-duotone::before,
.fa-brands::before,
[class^="fa-"]::before,
[class*=" fa-"]::before {
    font-family: var(--fa-style-family, "Font Awesome 6 Free") !important;
}

/* Mobile tuning */
@media (max-width: 768px) {
    body {
        font-size: 15px;
    }

    h1 {
        line-height: 1.12;
    }

    h2,
    h3 {
        line-height: 1.18;
    }

    .btn,
    button,
    input[type="submit"],
    input[type="button"] {
        letter-spacing: 0;
    }
}

/* Accessibility: preserve readable text when users enlarge fonts */
@media (max-width: 420px) {
    html {
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }
}