/*
DESIGN CONTRACT
THESIS: Lifecycle Weave keeps every physical asset connected to a trusted record; refuse generic green-tech gradients, glass, glow, and invented claims.
OWN-WORLD: Forest, paper, ink and restrained gold; Montserrat headings, IBM Plex interfaces, woven-shield marks, flat bordered surfaces, lifecycle-node accents.
STORY: Identify the asset, understand its state and evidence, then take the next governed action from registration through retirement.
FIRST VIEWPORT: A contextual Imara Nexus lockup, the current operational context, and the primary permitted action are immediately legible.
FORM: The supplied Imara Nexus brand manual is pinned. This layer applies its identity globally without changing product workflows.
*/

:root {
    --brand-forest: #0E3B2A;
    --brand-forest-deep: #0E3B2A;
    --brand-nexus-gold: #B8862B;
    --brand-gold-text: #8A6318;
    --brand-signal-gold: #D9AE4E;
    --brand-paper: #F7F5F0;
    --brand-ink: #1C1F1D;
    --brand-slate: #5C6660;
    --brand-copper: #8A4B1F;
    --brand-rule: #E3E0D8;
    --brand-white: #FFFFFF;
    --font-display: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-body: "IBM Plex Sans", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
    --font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
}

html { color-scheme: light; }

body {
    color: var(--brand-ink);
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.6;
}

h1, h2, h3, h4, h5, h6,
.page-heading, .title {
    font-family: var(--font-display);
}

h1, .page-heading, .title { font-weight: 700; letter-spacing: -0.01em; }
h2, h3, h4, h5, h6 { font-weight: 600; }

code, pre, kbd, samp,
.asset-id, .asset-tag, .serial-number, .timestamp,
[data-asset-id], [data-serial-number] {
    font-family: var(--font-mono);
}

:focus-visible {
    outline: 3px solid var(--brand-gold-text);
    outline-offset: 3px;
}

.bg-brand-forest :focus-visible,
[data-brand-surface="forest"] :focus-visible {
    outline-color: var(--brand-signal-gold);
}

.brand-lockup {
    display: block;
    height: auto;
    min-width: 130px;
    object-fit: contain;
}

.brand-icon { display: block; width: 40px; height: 40px; object-fit: contain; }
.brand-icon--small { width: 24px; height: 24px; }

.status-retired,
.status-disposed,
.status-written-off,
[data-lifecycle-state="retired"],
[data-lifecycle-state="disposed"],
[data-lifecycle-state="written-off"] {
    color: var(--brand-copper);
}