/* Design tokens, reset and shared helpers. Change colours/sizes here, not in the other files. */

:root {
    /* Neutral palette */
    --c-white: #ffffff;
    --c-black: #000000;
    --c-slate-50: #f8fafc;
    --c-slate-100: #f1f5f9;
    --c-slate-200: #e2e8f0;
    --c-slate-300: #cbd5e1;
    --c-slate-400: #94a3b8;
    --c-slate-500: #64748b;
    --c-slate-600: #475569;
    --c-slate-700: #334155;
    --c-slate-800: #1e293b;

    /* Accent and status colours */
    --c-primary: #2563eb;
    --c-primary-light: #3b82f6;
    --c-primary-dark: #1e3a8a;
    --c-info-bg: #eff6ff;
    --c-info-border: #dbeafe;
    --c-info-text: #1e40af;
    --c-success: #16a34a;
    --c-danger: #ef4444;

    /* Subsidence ramp (legend): stable → high risk */
    --ramp-low: #22c55e;
    --ramp-mid: #facc15;
    --ramp-high: #dc2626;

    /* Typography */
    --font-sans: 'Sarabun', sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --fs-2xs: 9px;
    --fs-xs: 10px;
    --fs-sm: 12px;
    --fs-md: 13px;
    --fs-lg: 14px;
    --fs-xl: 18px;

    /* Layout sizes */
    --header-h: 64px;
    --nav-w: 76px;
    --panel-left-w: 288px;
    --panel-right-w: 372px;

    /* Shape */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-full: 9999px;
    --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);

    /* Spacing scale */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-6: 24px;
    --sp-8: 32px;

    /* Roles that the neutral scale does not cover */
    --c-page: var(--c-slate-100);          /* page plane behind cards */
    --c-on-accent: #ffffff;                /* text on a filled accent (buttons, badges) */
    --c-logo-plate: transparent;           /* backing of the HII logo */
    --c-badge-ok-text: #065f46;
    --c-badge-ok-bg: #d1fae5;
    --c-badge-wait-text: #92400e;
    --c-badge-wait-bg: #fef3c7;
    --c-neg-text: #a83232;                 /* subsidence values in tables */
    --c-pos-text: #1c5cab;                 /* uplift values in tables */
    --c-switch-off: #d1d5db;

    /* Chart chrome (read by js/theme.js for Chart.js and drawn charts) */
    --chart-ink: #0b0b0b;
    --chart-ink-2: #52514e;
    --chart-muted: #898781;
    --chart-grid: #e1e0d9;
    --chart-axis: #c3c2b7;
    --chart-surface: #ffffff;
    --chart-band: rgb(42 120 214 / 0.16);

    color-scheme: light;
}

/* Dark theme: the neutral scale runs the other way, so every component that uses it follows.
   Set by js/theme.js on <html data-theme="dark"> (the inline script in index.html sets it before the first paint). */
:root[data-theme="dark"] {
    --c-white: #1b2029;
    --c-black: #f1f3f6;
    --c-slate-50: #161a22;
    --c-slate-100: #10141a;
    --c-slate-200: #2b323e;
    --c-slate-300: #3b4452;
    --c-slate-400: #5f6a7b;
    --c-slate-500: #8e98a8;
    --c-slate-600: #a9b2bf;
    --c-slate-700: #c5ccd6;
    --c-slate-800: #e7eaef;

    --c-primary: #3987e5;
    --c-primary-light: #5598e7;
    --c-primary-dark: #9ec5f4;
    --c-info-bg: #172338;
    --c-info-border: #223a5c;
    --c-info-text: #9ec5f4;
    --c-success: #0ca30c;
    --c-danger: #e66767;

    --c-page: #0d1015;
    --c-logo-plate: #ffffff;
    --c-badge-ok-text: #86efac;
    --c-badge-ok-bg: #12351f;
    --c-badge-wait-text: #fcd34d;
    --c-badge-wait-bg: #3a2c0c;
    --c-neg-text: #ef8a89;
    --c-pos-text: #86b6ef;
    --c-switch-off: #4a5262;

    --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
    --shadow-md: 0 4px 10px -2px rgb(0 0 0 / 0.45);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.5);

    --chart-ink: #f0efec;
    --chart-ink-2: #c3c2b7;
    --chart-muted: #8e98a8;
    --chart-grid: #2c323c;
    --chart-axis: #414957;
    --chart-surface: #1b2029;
    --chart-band: rgb(57 135 229 / 0.22);

    color-scheme: dark;
}

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

body,
h1,
h2,
h3,
p,
ul {
    margin: 0;
}

ul {
    padding: 0;
    list-style: none;
}

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

button,
input,
select {
    font: inherit;
    color: inherit;
}

[hidden] {
    display: none !important;
}

/* Sliders, check boxes and radio buttons take the accent colour in both themes */
input {
    accent-color: var(--c-primary);
}

body {
    font-family: var(--font-sans);
    background: var(--c-page);
    color: var(--c-slate-800);
    line-height: 1.5;
}

/* Thin scrollbar for panels */
.scroll-thin::-webkit-scrollbar {
    width: 4px;
}

.scroll-thin::-webkit-scrollbar-thumb {
    background: var(--c-slate-300);
    border-radius: 10px;
}

.scroll-thin {
    scrollbar-width: thin;
    scrollbar-color: var(--c-slate-300) transparent;
}