/* ============================================================
   TTSFFL — assets/css/main.css
   CSS custom properties, reset, and base typography.
   All colors and fonts are defined here as variables —
   dark_mode.css overrides them for dark mode.
   ============================================================ */

/* ── @font-face: Self-hosted Inter ──────────────────────────
   Download Inter woff2 files from https://fontsource.org/fonts/inter
   Place the 4 files below in /assets/fonts/
   ---------------------------------------------------------- */
@font-face {
    font-family: 'Inter';
    src: url('/assets/fonts/inter-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('/assets/fonts/inter-500.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('/assets/fonts/inter-600.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('/assets/fonts/inter-700.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ── CSS Custom Properties (Light Mode) ─────────────────────
   These are the single source of truth for every color and
   font used across the site. dark_mode.css overrides these.
   ---------------------------------------------------------- */
:root {
    /* Brand colors */
    --color-primary:        #773141;   /* Burgundy */
    --color-primary-dark:   #5C1A2A;   /* Darker burgundy */
    --color-primary-light:  #8B3D51;   /* Lighter burgundy (hover states) */
    --color-accent:         #FFB612;   /* Gold */
    --color-accent-dark:    #E09F00;   /* Darker gold (hover) */

    /* Backgrounds */
    --color-bg:             #FAF8F5;   /* Page background */
    --color-bg-card:        #FFFFFF;   /* Card / panel background */
    --color-bg-nav:         #773141;   /* Navbar background */
    --color-bg-drawer:      #5C1A2A;   /* Mobile drawer background */
    --color-bg-row-alt:     #F5EEF0;   /* Alternating table row tint */
    --color-bg-header-row:  var(--color-primary);   /* Table header row */

    /* Text */
    --color-text-primary:   #1A1A1A;   /* Main body text */
    --color-text-secondary: #666666;   /* Muted / secondary text */
    --color-text-nav:       #FAF8F5;   /* Navbar link text */
    --color-text-on-dark:   #FAF8F5;   /* Text on dark backgrounds */
    --color-text-heading:   #5C1A2A;   /* Page headings */

    /* Borders */
    --color-border:         #CCCCCC;   /* Default borders */
    --color-border-accent:  #FFB612;   /* Gold accent border */
    --color-border-card:    #E8E0E3;   /* Card border */

    /* Status colors */
    --color-win:            #2E7D32;   /* Win / positive */
    --color-win-bg:         #E8F5E9;   /* Win background tint */
    --color-loss:           #C62828;   /* Loss / negative */
    --color-loss-bg:        #FFEBEE;   /* Loss background tint */
    --color-tie:            #666666;   /* Tie */
    --color-clinch:         #FFB612;   /* Playoff clinched */
    --color-eliminated:     #999999;   /* Eliminated */

    /* Badges */
    --color-badge-keeper:   #FFB612;   /* Gold K badge */
    --color-badge-alumni:   #888888;   /* Grey Alumni badge */
    --color-badge-admin:    #773141;   /* Admin badge */

    /* Glow effect (records broken) */
    --color-glow:           #FFB612;
    --shadow-glow:          0 0 12px rgba(255, 182, 18, 0.6);

    /* Fonts */
    --font-body:    'Inter', 'Segoe UI', Arial, sans-serif;
    --font-heading: 'Inter', 'Segoe UI', Arial, sans-serif;
    --font-mono:    'Courier New', Courier, monospace;

    /* Font weights */
    --fw-regular:   400;
    --fw-medium:    500;
    --fw-semibold:  600;
    --fw-bold:      700;

    /* Font sizes */
    --fs-xs:    0.75rem;    /* 12px */
    --fs-sm:    0.875rem;   /* 14px */
    --fs-base:  1rem;       /* 16px */
    --fs-md:    1.125rem;   /* 18px */
    --fs-lg:    1.25rem;    /* 20px */
    --fs-xl:    1.5rem;     /* 24px */
    --fs-2xl:   1.875rem;   /* 30px */
    --fs-3xl:   2.25rem;    /* 36px */

    /* Spacing scale */
    --space-1:  0.25rem;    /* 4px */
    --space-2:  0.5rem;     /* 8px */
    --space-3:  0.75rem;    /* 12px */
    --space-4:  1rem;       /* 16px */
    --space-5:  1.25rem;    /* 20px */
    --space-6:  1.5rem;     /* 24px */
    --space-8:  2rem;       /* 32px */
    --space-10: 2.5rem;     /* 40px */
    --space-12: 3rem;       /* 48px */

    /* Borders & radius */
    --radius-sm:   4px;
    --radius-md:   8px;
    --radius-lg:   12px;
    --radius-xl:   16px;
    --radius-full: 9999px;  /* Pill / circle */

    /* Shadows */
    --shadow-sm:   0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-md:   0 4px 16px rgba(0, 0, 0, 0.10);
    --shadow-lg:   0 8px 32px rgba(0, 0, 0, 0.12);

    /* Transitions */
    --transition-fast:   150ms ease;
    --transition-normal: 250ms ease;
    --transition-slow:   400ms ease;

    /* Navbar */
    --navbar-height:        60px;
    --drawer-width:         280px;

    /* Logo circle */
    --logo-border-default:  var(--color-primary);
    --logo-border-active:   var(--color-accent);
}

/* ── Reset ───────────────────────────────────────────────────
   Minimal, practical reset.
   ---------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    font-weight: var(--fw-regular);
    font-size: var(--fs-base);
    line-height: 1.6;
    color: var(--color-text-primary);
    background-color: var(--color-bg);
    min-height: 100vh;
    padding-top: var(--navbar-height); /* Offset for fixed navbar */
}

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

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

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

button {
    cursor: pointer;
    font-family: var(--font-body);
}

input,
select,
textarea {
    font-family: var(--font-body);
    font-size: var(--fs-base);
}

ul, ol {
    list-style: none;
}

/* ── Base Typography ─────────────────────────────────────────
   ---------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: var(--fw-bold);
    color: var(--color-text-heading);
    line-height: 1.2;
}

h1 { font-size: var(--fs-3xl); margin-bottom: var(--space-4); }
h2 { font-size: var(--fs-2xl); margin-bottom: var(--space-3); }
h3 { font-size: var(--fs-xl);  margin-bottom: var(--space-3); }
h4 { font-size: var(--fs-lg);  margin-bottom: var(--space-2); }

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

/* ── Utility Classes ─────────────────────────────────────────
   ---------------------------------------------------------- */
.text-gold    { color: var(--color-accent); }
.text-burg    { color: var(--color-primary); }
.text-muted   { color: var(--color-text-secondary); }
.text-win     { color: var(--color-win); }
.text-loss    { color: var(--color-loss); }
.text-center  { text-align: center; }
.text-right   { text-align: right; }
.text-bold    { font-weight: var(--fw-bold); }
.text-semi    { font-weight: var(--fw-semibold); }

.hidden       { display: none !important; }
.sr-only      { position: absolute; width: 1px; height: 1px;
                padding: 0; margin: -1px; overflow: hidden;
                clip: rect(0,0,0,0); border: 0; }

/* ── Team Logo Circle ────────────────────────────────────────
   All team logos are displayed as circles with a thin border.
   .logo-circle--gold: gold border (winners, active)
   .logo-circle--sm / --lg: size variants
   ---------------------------------------------------------- */
.logo-circle {
    width:  40px;
    height: 40px;
    border-radius: var(--radius-full);
    border: 2px solid var(--logo-border-default);
    object-fit: cover;
    flex-shrink: 0;
}
.logo-circle--gold  { border-color: var(--color-accent); }
.logo-circle--sm    { width: 28px; height: 28px; }
.logo-circle--md    { width: 40px; height: 40px; }
.logo-circle--lg    { width: 56px; height: 56px; border-width: 3px; }
.logo-circle--xl    { width: 80px; height: 80px; border-width: 3px; }

/* ── Badges ──────────────────────────────────────────────────
   Inline labels: K (keeper), Alumni, Crown, etc.
   ---------------------------------------------------------- */
.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1px var(--space-2);
    border-radius: var(--radius-sm);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    line-height: 1.4;
    white-space: nowrap;
}

.badge--keeper  { background: var(--color-accent);       color: #1A1A1A; }
.badge--alumni  { background: var(--color-badge-alumni); color: #FFFFFF; }
.badge--win     { background: var(--color-win-bg);       color: var(--color-win); }
.badge--loss    { background: var(--color-loss-bg);      color: var(--color-loss); }
.badge--clinch  { background: var(--color-accent);       color: #1A1A1A; }
.badge--elim    { background: #EEEEEE;                   color: var(--color-eliminated); }

/* ── Page wrapper ────────────────────────────────────────────
   Used by every page module as the outer container.
   ---------------------------------------------------------- */
.page-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--space-6) var(--space-4);
}

.page-title {
    font-size: var(--fs-2xl);
    font-weight: var(--fw-bold);
    color: var(--color-text-heading);
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-3);
    border-bottom: 3px solid var(--color-accent);
}

/* ── Divider ─────────────────────────────────────────────────
   ---------------------------------------------------------- */
.divider {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: var(--space-6) 0;
}

/* ── Loading state ───────────────────────────────────────────
   ---------------------------------------------------------- */
.loading {
    text-align: center;
    padding: var(--space-12);
    color: var(--color-text-secondary);
    font-size: var(--fs-md);
}