/*
 * LockerRoom: colours and fonts of the club website, own layout built for
 * the phone first. Colours, fonts, font sizes and spacing only through the
 * variables in :root; components use no fixed values.
 */

@font-face { font-family: "Rajdhani"; src: url("/fonts/Rajdhani/Rajdhani-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; size-adjust: 115%; }
@font-face { font-family: "Rajdhani"; src: url("/fonts/Rajdhani/Rajdhani-Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; size-adjust: 115%; }
@font-face { font-family: "Rajdhani"; src: url("/fonts/Rajdhani/Rajdhani-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; size-adjust: 115%; }
@font-face { font-family: "Rajdhani"; src: url("/fonts/Rajdhani/Rajdhani-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; size-adjust: 115%; }
@font-face { font-family: "Oxanium"; src: url("/fonts/Oxanium/Oxanium-VariableFont_wght.ttf") format("truetype"); font-weight: 200 800; font-display: swap; }

:root {
    --font-body:           "Rajdhani", system-ui, sans-serif;
    --font-body-weight:    500;
    --font-heading:        "Oxanium", system-ui, sans-serif;
    --font-heading-weight: 700;

    /* Font sizes: the only steps components may use. */
    --text-sm:   0.875rem;
    --text-md:   1rem;
    --text-lg:   1.125rem;
    --heading-3: 1.25rem;
    --heading-2: 1.5rem;
    --heading-1: 1.875rem;

    /* Spacing */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;

    --color-primary:      #900000;
    --color-primary-dark: #700000;
    --color-primary-soft: #F6E6E6;
    --color-surface:      #FFFFFF;
    --color-accent:       #65655E;
    --color-bg:           #F5F5F3;
    --color-border:       #DCDCD7;
    --color-text:         #1F1F1C;
    --color-success:      #2E7D32;
    --color-success-soft: #E8F3E9;
    --color-warning:      #8A5A00;
    --color-warning-soft: #FDF3E1;

    --radius:       10px;
    --radius-small: 4px;
    --shadow:       0 1px 2px rgb(31 31 28 / 6%), 0 4px 16px rgb(31 31 28 / 6%);
    --max-width:    40rem;
    --touch:        2.75rem;   /* smallest height of anything to tap */
}

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

[hidden] { display: none !important; }

html { font-size: 100%; }

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    font-weight: var(--font-body-weight);
    font-size: var(--text-md);
    line-height: 1.5;
}

h1, h2, h3 {
    font-family: var(--font-heading);
    font-weight: var(--font-heading-weight);
    line-height: 1.2;
    margin: 0 0 var(--space-4);
}
h1 { font-size: var(--heading-1); }
h2 { font-size: var(--heading-2); }
h3 { font-size: var(--heading-3); }

p { margin: 0 0 var(--space-4); }

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

.icon { width: 1.25em; height: 1.25em; vertical-align: -0.25em; flex-shrink: 0; }

/* Header: brand left, menu right; stays at the top. */
.app-header {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-4);
    background: var(--color-primary);
    color: var(--color-surface);
}
.app-header a, .app-header button { color: var(--color-surface); }
.brand {
    font-family: var(--font-heading);
    font-weight: var(--font-heading-weight);
    font-size: var(--text-lg);
    text-decoration: none;
    margin-right: auto;
}
.app-nav { display: flex; align-items: center; gap: var(--space-2); }
.app-nav form { margin: 0; }
.nav-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    min-height: var(--touch);
    padding: 0 var(--space-2);
    font: inherit;
    font-size: var(--text-sm);
    text-decoration: none;
    background: none;
    border: 0;
    cursor: pointer;
}
.nav-link[aria-current="page"] { text-decoration: underline; }
.nav-label { display: none; }
@media (min-width: 30rem) { .nav-label { display: inline; } }

.container {
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: var(--space-5) var(--space-4);
    flex: 1;
}
.container-wide { max-width: 64rem; }

.app-footer {
    padding: var(--space-4);
    text-align: center;
    font-size: var(--text-sm);
    color: var(--color-accent);
}

/* Cards */
.card {
    background: var(--color-surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: var(--space-5);
    margin-bottom: var(--space-5);
}
.card > :last-child { margin-bottom: 0; }

/* Notes */
.notice {
    display: flex;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-small);
    margin-bottom: var(--space-4);
    background: var(--color-primary-soft);
    color: var(--color-primary-dark);
}
.notice-success { background: var(--color-success-soft); color: var(--color-success); }
.notice-info, .notice-warning { background: var(--color-warning-soft); color: var(--color-warning); }

/* Forms */
.form { display: grid; gap: var(--space-4); }
.field { display: grid; gap: var(--space-1); }
.field label { font-weight: 600; }
.field input, .field select, .field textarea {
    width: 100%;
    min-height: var(--touch);
    padding: var(--space-2) var(--space-3);
    font: inherit;
    color: inherit;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-small);
}
.field input:focus, .field select:focus, .field textarea:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 1px;
}
.field-error { color: var(--color-primary); font-size: var(--text-sm); }
.field [aria-invalid="true"] { border-color: var(--color-primary); }

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: var(--touch);
    padding: var(--space-2) var(--space-5);
    font: inherit;
    font-weight: 600;
    color: var(--color-surface);
    background: var(--color-primary);
    border: 0;
    border-radius: var(--radius-small);
    text-decoration: none;
    cursor: pointer;
}
.button:hover { background: var(--color-primary-dark); color: var(--color-surface); }
.button-secondary { background: var(--color-accent); }

/* Tables */
.table-scroll { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.data-table th, .data-table td {
    padding: var(--space-2);
    border-bottom: 1px solid var(--color-border);
    text-align: left;
    vertical-align: top;
}

/* States */
.badge {
    display: inline-block;
    padding: 0 var(--space-2);
    border-radius: var(--radius-small);
    font-size: var(--text-sm);
    font-weight: 600;
    background: var(--color-bg);
}
.badge-ok { background: var(--color-success-soft); color: var(--color-success); }
.badge-warning { background: var(--color-warning-soft); color: var(--color-warning); }
.badge-error { background: var(--color-primary-soft); color: var(--color-primary); }

.lang-switch { display: flex; gap: var(--space-2); justify-content: center; font-size: var(--text-sm); }
.muted { color: var(--color-accent); font-size: var(--text-sm); }
pre.debug { white-space: pre-wrap; font-size: var(--text-sm); overflow-x: auto; }