/* site.css — RSFW base layer: CSS variables, reset, typography, layout.
   Loaded on every page (before header.css, components.css, footer.css, and
   page-specific CSS). Keep this lean — component styles go in components.css,
   header/nav styles in header.css, footer styles in footer.css. */

:root {
    /* Brand accent (clan red) */
    --accent-red:        #e10600;
    --accent-red-dark:   #b00500;
    --accent-red-light:  #ff2d20;

    /* Purple palette */
    --primary-purple:    #8b5cf6;
    --secondary-purple:  #a78bfa;
    --dark-purple:       #6d28d9;
    --light-purple:      #c4b5fd;
    --accent-purple:     #7c3aed;
    --accent:            #8b5cf6;

    /* Backgrounds — dark theme */
    --background-dark:   #0a0a12;
    --surface-dark:      #12121e;
    --surface-black:     #07070f;
    --card-dark:         #1a1a2e;
    --card-bg:           #1a1a2e;
    --header-bg:         #0d0d1a;
    --hover-color:       #1e1e30;

    /* Text */
    --text-white:        #ffffff;
    --text-primary:      #f1f0f5;
    --text-secondary:    #c4b5fd;
    --text-light:        #e2e0ea;
    --text-gray:         #9ca3af;
    --text-muted:        #6b7280;
    --text-danger:       #f87171;

    /* Borders */
    --border-color:      rgba(139,92,246,0.2);
    --border-dark:       rgba(139,92,246,0.15);

    /* Status colours */
    --success:           #10b981;
    --error:             #ef4444;
    --warning:           #f59e0b;

    /* Layout */
    --max-width:         1400px;
    --header-height:     64px;

    /* Focus ring (a11y) */
    --focus-ring:        2px solid #e10600;
    --focus-offset:      2px;
}

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

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

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background: var(--background-dark);
    color: var(--text-white);
    line-height: 1.6;
    min-height: 100vh;
}

/* Container */
.container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 24px;
}

.container-narrow {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 24px;
}

/* Typography helpers */
.text-white  { color: #fff !important; }
.text-muted  { color: var(--text-muted) !important; }
.text-gray   { color: var(--text-gray) !important; }
.text-danger { color: var(--text-danger) !important; }
.text-success{ color: var(--success) !important; }
.text-center { text-align: center !important; }
.tdunderline { text-decoration: underline; }

h1, h2, h3, h4, h5, h6 {
    color: var(--text-white);
    font-weight: 700;
    line-height: 1.25;
}

a {
    color: var(--primary-purple);
    text-decoration: none;
    transition: color 0.2s;
}
a:hover { color: var(--light-purple); }

img { max-width: 100%; height: auto; }

/* Skip link — visually hidden until focused (a11y) */
.skip-link {
    position: absolute;
    top: -100px;
    left: 0;
    background: var(--accent-red);
    color: #fff;
    padding: 12px 20px;
    z-index: 9999;
    border-radius: 0 0 8px 0;
    font-weight: 600;
    text-decoration: none;
    transition: top 0.2s;
}
.skip-link:focus { top: 0; }

/* Focus-visible for keyboard users (a11y) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-offset);
}

/* Utility: screen-reader-only (a11y) */
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0);
    white-space: nowrap; border: 0;
}

/* Reduced-motion preference (a11y) — disable non-essential animations */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}