:root {
    
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;

    
    --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.12);
    --shadow-elevated: 0 4px 16px rgba(0, 0, 0, 0.18);

    
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 40px;

    
    --font-body: 400;
    --font-medium: 500;
    --font-bold: 600;
    --font-heading: 700;

    
    --interactive: #8b8f9c;
    --accent-soft: rgba(255, 92, 0, 0.15);
    --accent-border: rgba(255, 92, 0, 0.35);

    /* Canonical Scrapline palette — single source of truth for every
       surface, modal, card and dashboard panel. Change a colour here and
       it propagates everywhere that references the token below. */
    --surface: #161a26;          /* primary card / modal surface        */
    --surface-deep: #12151f;     /* recessed panels, inputs, wells       */
    --surface-band: #12151d;     /* page band / behind-content backdrop  */
    --border: #2a2f41;           /* standard 1px hairline on surfaces     */
    --border-soft: rgba(255, 255, 255, 0.06); /* faint inner divider      */
    --accent: #ff5c00;           /* Scrapline orange                      */
    --accent-90: #e65200;        /* pressed / darker accent               */
    --text: #b0b3b8;             /* body copy                             */
    --text-strong: #e4e6eb;      /* headings / emphasised copy            */
    --muted: #8b8f9c;            /* secondary / hint copy                 */
    --blurple: #5865f2;          /* Discord blurple accents               */
}

h1, h2 {
    font-weight: var(--font-heading);
    line-height: 1.15;
}

h3, h4 {
    font-weight: var(--font-bold);
    line-height: 1.2;
}

body {
    font-weight: var(--font-body);
}