/* ===== Demos 01.3 — base visual Trilha OS (brandkit v2) ===== */
@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400&family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
    --paper: #F1ECDF;
    --paper-2: #ECE6D5;
    --paper-3: #E5DEC8;
    --ink: #0E0E0C;
    --ink-soft: #3A372F;
    --ink-mute: #6B675B;
    --ink-faint: #9A9486;
    --rust: #C4421A;
    --rust-deep: #8E2F11;
    --burnt: #6B2410;
    --rust-glow: rgba(196,66,26,0.10);
    --rust-border: rgba(196,66,26,0.30);
    --ok: #2E7D46;
    --warn: #B8860B;
    --info: #3A5A78;
    --line: #D8D0BD;
    --line-strong: #C7BDA4;
    --shadow-hard: 8px 8px 0 var(--ink);
    --shadow-soft: 4px 4px 0 var(--ink);
    --ease: cubic-bezier(.2,.8,.2,1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 16px; }
body {
    font-family: 'Inter Tight', sans-serif;
    background: var(--paper);
    color: var(--ink);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    position: relative;
}
/* grão */
body::before {
    content: ''; position: fixed; inset: 0; z-index: 9999; pointer-events: none; opacity: 0.04;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.serif { font-family: 'Instrument Serif', serif; font-style: italic; color: var(--rust); font-weight: 400; }
.mono { font-family: 'JetBrains Mono', monospace; }

/* selo de canto / glyph */
.brand-corner {
    position: fixed; top: 22px; right: 26px; z-index: 50;
    font-family: 'JetBrains Mono', monospace; font-size: 0.62rem; font-weight: 500;
    letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-faint);
}
.brand-corner b { color: var(--rust); }

/* topbar das telas de demo */
.demo-top {
    background: var(--ink); color: var(--paper);
    padding: 16px 30px; display: flex; align-items: center; gap: 16px;
    border-bottom: 4px solid var(--rust);
}
.demo-top .glyph { color: var(--rust); font-size: 1.4rem; }
.demo-top .kicker {
    font-family: 'JetBrains Mono', monospace; font-size: 0.58rem; font-weight: 500;
    letter-spacing: 0.26em; text-transform: uppercase; color: var(--rust); display: block; margin-bottom: 4px;
}
.demo-top h1 { font-size: 1.25rem; font-weight: 800; letter-spacing: -0.03em; }
.demo-top .pill {
    margin-left: auto; font-family: 'JetBrains Mono', monospace; font-size: 0.58rem;
    letter-spacing: 0.14em; text-transform: uppercase; color: var(--paper);
    border: 1px solid var(--rust); padding: 5px 11px;
}
.back {
    font-family: 'JetBrains Mono', monospace; font-size: 0.58rem; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--ink-faint); text-decoration: none; border: 1px solid var(--line-strong);
    padding: 5px 11px; transition: all 0.2s var(--ease);
}
.back:hover { color: var(--rust); border-color: var(--rust); }