/* ================================================================
   MOLDWISE Design System — Monochromatique

   Design tokens and base typography for the entire UI.
   Fonts: Montserrat (headings), DM Sans (body), DM Mono (labels/code)
   Palette: PLASTWISE brand — dark navy + warm grey + orange accent
   ================================================================ */

:root {
    /* ── Palette (from argus-plast.com brand) ── */
    --black:   #0f1923;
    --dark:    #1a2833;
    --mid:     #526170;
    --light:   #8fa3b8;
    --subtle:  #b8c4cf;
    --border:  #d8ddd6;
    --surface: #f4f6f2;
    --white:   #f0ede8;

    /* ── Accent ── */
    --accent:  #d4731a;
    --accent-soft: rgba(212, 115, 26, 0.12);
    --accent-hover: #b8621a;

    /* ── Status ── */
    --pass:    #2d8a4e;
    --warn:    #d4731a;
    --fail:    #c94f3a;
    --info:    #40bfb0;

    /* ── Typography ── */
    --font-heading: 'Montserrat', system-ui, sans-serif;
    --font-body:    'DM Sans', system-ui, sans-serif;
    --font-mono:    'DM Mono', 'Consolas', monospace;

    /* ── Spacing (4px grid) ── */
    --space-xs:  4px;
    --space-sm:  8px;
    --space-md:  16px;
    --space-lg:  24px;
    --space-xl:  32px;
    --space-2xl: 48px;
    --space-3xl: 64px;

    /* ── Layout ── */
    --max-width:     1280px;
    --header-height: 56px;
    --sidebar-width: 30%;
    --viewer-width:  70%;

    /* ── Transitions ── */
    --transition: 150ms ease;
}

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

html { font-size: 16px; -webkit-font-smoothing: antialiased; }

body {
    font-family: var(--font-body);
    color: var(--black);
    background: var(--white);
    line-height: 1.6;
}

/* ── Headings ── */
h1, h2, h3, h4 {
    font-family: var(--font-heading);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.125rem; }
h4 { font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.05em; }

/* ── Body text ── */
p      { margin-bottom: var(--space-md); }
a      { color: var(--black); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--mid); }

/* ── Mono / Labels ── */
code, .mono, .label {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
}

.label {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--mid);
}

/* ── Status colours ── */
.text-pass { color: var(--pass); }
.text-warn { color: var(--warn); }
.text-fail { color: var(--fail); }
.text-info { color: var(--info); }
.text-mid  { color: var(--mid); }