/* ===========================================================
   BASE / RESET / TYPOGRAPHY
===========================================================*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:var(--font-family);
    background:var(--color-bg);
    color:var(--color-text);

    font-size:var(--fs-body);
    line-height:1.6;

    -webkit-font-smoothing:antialiased;
}

a{
    color:inherit;
    text-decoration:none;
}

ul{
    list-style:none;
}

img{
    max-width:100%;
    display:block;
}

button{
    font-family:inherit;
    cursor:pointer;
    border:none;
    background:none;
    color:inherit;
}

/* Container */

.container{
    max-width:var(--container-max);
    margin:0 auto;
    padding:0 var(--space-5);
}

/* Headings */

h1, h2, h3, h4{
    font-weight:var(--fw-bold);
    line-height:1.25;
}

h1{ font-size:var(--fs-h1); }
h2{ font-size:var(--fs-h2); }
h3{ font-size:var(--fs-h3); }

.text-muted{ color:var(--color-text-muted); }
.text-small{ font-size:var(--fs-small); }
.text-tiny{ font-size:var(--fs-tiny); }
.mono{ font-family:var(--font-mono); }

/* ===========================================================
   FORMS (Golden Rule 4 — simple, plain-language)
===========================================================*/

.form-group{
    margin-bottom:var(--space-4);
}

.form-label{
    display:block;

    font-size:var(--fs-tiny);
    font-weight:var(--fw-semibold);
    text-transform:uppercase;
    letter-spacing:0.04em;
    color:var(--color-text-muted);

    margin-bottom:6px;
}

.form-control{
    width:100%;
    padding:12px 16px;

    background:var(--color-surface-alt);
    border:1px solid var(--color-border);
    border-radius:var(--radius-md);

    color:var(--color-text);
    font-size:var(--fs-body);
    font-family:inherit;

    transition:border-color var(--transition-fast);
}

.form-control:focus{
    outline:none;
    border-color:var(--color-purple);
}

.form-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:var(--space-4);
}

/* ===========================================================
   PAGE HEADER
   Shared by every inner page (Teams, Players, Fixtures, ...) so the
   "<h1> + one-line subtitle" pattern only needs to be styled once.
===========================================================*/
.page-header{
    margin:var(--space-6) 0 var(--space-5);
}

.page-header h1{
    font-size:1.75rem;
    margin-bottom:4px;
}

.page-header-sub{
    color:var(--color-text-muted);
    font-size:var(--fs-body);
}

.breadcrumb{
    margin-top:4px;
    font-size:var(--fs-small);
    color:var(--color-text-muted);
}

.breadcrumb a{
    color:var(--color-text-muted);
    text-decoration:none;
}

.breadcrumb a:hover{
    color:var(--color-gold);
}

.breadcrumb-current{
    color:var(--color-gold);
}