/* ============================================================
   theme.css — CSS custom properties and base reset
   All design tokens live here. Import this first.
   ============================================================ */

/* ── Google Fonts: DM Sans (self-hosted) ─────────────────── */
@font-face {
    font-family: 'DM Sans';
    src: url('../fonts/dm-sans/DMSans-Regular.woff2') format('woff2'),
         url('../fonts/dm-sans/DMSans-Regular.woff')  format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'DM Sans';
    src: url('../fonts/dm-sans/DMSans-Medium.woff2') format('woff2'),
         url('../fonts/dm-sans/DMSans-Medium.woff')  format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'DM Sans';
    src: url('../fonts/dm-sans/DMSans-SemiBold.woff2') format('woff2'),
         url('../fonts/dm-sans/DMSans-SemiBold.woff')  format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

/* ── Design tokens ────────────────────────────────────────── */
:root {
    /* Colour palette */
    --color-sidebar-bg:      #1a1d23;
    --color-sidebar-hover:   #22262e;
    --color-sidebar-active:  #1e2230;
    --color-sidebar-text:    #a8afc0;
    --color-sidebar-heading: #5a6278;
    --color-sidebar-border:  #252930;

    --color-content-bg:      #f7f8fa;
    --color-surface:         #ffffff;
    --color-surface-hover:   #f0f2f5;

    --color-accent:          #3b82f6;
    --color-accent-hover:    #2563eb;
    --color-accent-light:    #eff6ff;
    --color-accent-text:     #1d4ed8;

    --color-danger:          #ef4444;
    --color-danger-hover:    #dc2626;
    --color-danger-light:    #fef2f2;

    --color-success:         #22c55e;
    --color-success-light:   #f0fdf4;

    --color-warning:         #f59e0b;
    --color-warning-light:   #fffbeb;

    --color-text-primary:    #111827;
    --color-text-secondary:  #6b7280;
    --color-text-muted:      #9ca3af;

    --color-border:          #e5e7eb;
    --color-border-strong:   #d1d5db;
    --color-divider:         #f3f4f6;

    /* Typography */
    --font-family:           'DM Sans', system-ui, -apple-system, sans-serif;
    --font-size-xs:          12px;
    --font-size-sm:          13px;
    --font-size-base:        15px;
    --font-size-md:          16px;
    --font-size-lg:          18px;
    --font-size-xl:          20px;
    --font-size-2xl:         24px;
    --font-size-3xl:         30px;
    --line-height:           1.6;

    /* Spacing */
    --space-1:               4px;
    --space-2:               8px;
    --space-3:               12px;
    --space-4:               16px;
    --space-5:               20px;
    --space-6:               24px;
    --space-8:               32px;
    --space-10:              40px;
    --space-12:              48px;

    /* Radius */
    --radius-sm:             4px;
    --radius:                6px;
    --radius-md:             8px;
    --radius-lg:             12px;
    --radius-xl:             16px;
    --radius-full:           9999px;

    /* Shadows */
    --shadow-sm:             0 1px 2px rgba(0,0,0,.05);
    --shadow:                0 1px 4px rgba(0,0,0,.08), 0 2px 8px rgba(0,0,0,.04);
    --shadow-md:             0 4px 12px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.04);
    --shadow-lg:             0 8px 24px rgba(0,0,0,.10), 0 4px 8px rgba(0,0,0,.04);

    /* Layout */
    --sidebar-width:         240px;
    --topbar-height:         60px;
    --content-max-width:     1320px;
    --content-padding:       var(--space-8);

    /* Transition */
    --transition:            150ms ease;
}

/* ── Base reset ───────────────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: var(--font-size-base);
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    line-height: var(--line-height);
    color: var(--color-text-primary);
    background-color: var(--color-content-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    color: var(--color-accent);
    text-decoration: none;
}
a:hover {
    color: var(--color-accent-hover);
    text-decoration: underline;
}

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

button, input, select, textarea {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-text-primary);
}

ul, ol {
    list-style: none;
}

table {
    border-collapse: collapse;
    width: 100%;
}

/* ── Focus visible ────────────────────────────────────────── */
:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}