/**
 * Tiknix Docs — design tokens ported from the app's
 * views/components/design-system.php so the docs read as part of the product.
 * Figtree body · Bricolage display · Fraunces headings · DM Mono detail.
 */

/* ===== Tokens ===== */
:root, [data-theme="light"] {
    --bg:#f7f8fa; --fg:#1a2236; --fg-2:#5b667a; --fg-3:#7d8ca5;
    --border:#dde1e9; --emphasis:#0f172a;
    --primary:#0c41aa; --primary-hover:#093080;
    --link:#0c41aa; --link-hover:#093080;

    --surface:#ffffff; --surface-soft:#f0f3f9; --surface-inset:#e8ecf4;
    --shadow:0 1px 2px rgba(15,23,42,.04);
    --shadow-soft:0 1px 2px rgba(15,23,42,.04), 0 10px 28px -22px rgba(15,23,42,.12);
    --shadow-lift:0 22px 52px -22px rgba(15,23,42,.22), 0 6px 14px -6px rgba(15,23,42,.08);

    --accent-order:#0d57cb; --accent-report:#9b3725;
    --accent-system:#47649a; --accent-mgmt:#23529a;

    --ff-display:'Bricolage Grotesque','Figtree',system-ui,sans-serif;
    --ff-brand:'Fraunces',Georgia,'Times New Roman',serif;
    --ff-body:'Figtree',system-ui,-apple-system,sans-serif;
    --ff-mono:'DM Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

    --sidebar-width:262px; --sidebar-bg:#0a132d; --sidebar-text:#b5bed0;
    --sidebar-heading:#586894; --sidebar-hover:rgba(255,255,255,.06);
    --topbar-height:62px;

    --code-bg:#0d1428; --code-fg:#dde5f7;
}
[data-theme="dark"] {
    --bg:#0a132d; --fg:#eaedf5; --fg-2:#9ba4bd; --fg-3:#667190;
    --border:#1c2948; --emphasis:#eaedf5;
    --primary:#3b76f0; --primary-hover:#5f92f5;
    --link:#6ea0ff; --link-hover:#9dbcff;

    --surface:#101c3d; --surface-soft:#19264d; --surface-inset:#070e22;
    --shadow:0 1px 2px rgba(0,0,0,.22);
    --shadow-soft:0 1px 2px rgba(0,0,0,.24), 0 10px 26px -20px rgba(0,0,0,.55);
    --shadow-lift:0 24px 48px -20px rgba(0,0,0,.55), 0 6px 14px -6px rgba(0,0,0,.25);

    --accent-order:#3b76f0; --accent-report:#e86a56;
    --accent-system:#7094cc; --accent-mgmt:#5c8ee0;
    --sidebar-bg:#060d20;
    --code-bg:#070e22; --code-fg:#dde5f7;
}

/* ===== Base ===== */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
    margin:0; background:var(--bg); color:var(--fg);
    font-family:var(--ff-body); font-size:1.02rem; line-height:1.65;
    font-feature-settings:'ss01','ss03'; -webkit-font-smoothing:antialiased;
}
a{color:var(--link);text-decoration:none;}
a:hover{color:var(--link-hover);text-decoration:underline;}
img,svg{max-width:100%;}
hr{border:0;border-top:1px solid var(--border);margin:2.5rem 0;}

/* ===== Typography ===== */
.display{font-family:var(--ff-display);letter-spacing:-.025em;}
.mono{font-family:var(--ff-mono);font-feature-settings:'tnum';}
.eyebrow{
    font-family:var(--ff-mono);font-size:.68rem;letter-spacing:.22em;
    text-transform:uppercase;color:var(--fg-3);
}
h1{
    font-family:var(--ff-brand);font-variation-settings:'opsz' 96,'SOFT' 20;
    letter-spacing:-.02em;font-weight:700;line-height:1.08;
    font-size:clamp(1.9rem,3.6vw,2.6rem);margin:0 0 .5rem;
}
h2,h3,h4{font-family:var(--ff-display);letter-spacing:-.02em;font-weight:600;line-height:1.25;}
h2{font-size:1.5rem;margin:2.75rem 0 .85rem;}
h3{font-size:1.15rem;margin:2rem 0 .6rem;}
h4{font-size:1rem;margin:1.5rem 0 .5rem;}
p{margin:0 0 1.1rem;}
strong{font-weight:650;color:var(--emphasis);}

/* ===== Shell ===== */
.shell{display:flex;min-height:100vh;}
.sidebar{
    width:var(--sidebar-width);background:var(--sidebar-bg);color:var(--sidebar-text);
    display:flex;flex-direction:column;position:fixed;top:0;left:0;height:100vh;z-index:1050;
}
.sidebar-brand{
    display:flex;align-items:center;gap:.6rem;padding:1.1rem 1.25rem;
    color:#fff;text-decoration:none;
}
.sidebar-brand:hover{text-decoration:none;color:#fff;}
.brand-logo{
    width:32px;height:32px;flex:0 0 auto;background:currentColor;
    -webkit-mask:url(/img/tiknix.svg) center/contain no-repeat;
    mask:url(/img/tiknix.svg) center/contain no-repeat;
}
.brand-word{
    font-family:'Playfair Display',Georgia,'Times New Roman',serif;
    font-weight:600;font-size:1.45rem;letter-spacing:.005em;
}
.brand-sub{
    font-family:var(--ff-mono);font-size:.6rem;letter-spacing:.2em;
    text-transform:uppercase;color:var(--sidebar-heading);margin-left:.15rem;
}
.nav{padding:.5rem .75rem 1.5rem;overflow-y:auto;flex:1;}
.nav-heading{
    font-family:var(--ff-mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;
    color:var(--sidebar-heading);padding:1rem .75rem .35rem;
}
.nav-link{
    display:flex;align-items:center;gap:.6rem;padding:.45rem .75rem;margin-bottom:2px;
    border-radius:.55rem;color:var(--sidebar-text);text-decoration:none;
    font-size:.88rem;line-height:1.35;transition:background .15s,color .15s;
}
.nav-link:hover{background:var(--sidebar-hover);color:#fff;text-decoration:none;}
.nav-link.active{background:var(--primary);color:#fff;box-shadow:0 8px 18px -10px rgba(59,118,240,.8);}
.nav-num{
    font-family:var(--ff-mono);font-size:.7rem;opacity:.55;min-width:1.35rem;flex:0 0 auto;
}
.sidebar-foot{
    border-top:1px solid rgba(255,255,255,.07);padding:.85rem 1.25rem;
    font-size:.75rem;color:var(--sidebar-heading);
}
.sidebar-foot a{color:var(--sidebar-text);}

.main{flex:1;min-width:0;display:flex;flex-direction:column;margin-left:var(--sidebar-width);}
.topbar{
    height:var(--topbar-height);position:sticky;top:0;z-index:20;
    background:color-mix(in srgb,var(--bg) 82%,transparent);
    backdrop-filter:saturate(150%) blur(10px);
    border-bottom:1px solid var(--border);
    display:flex;align-items:center;gap:1rem;padding:0 1.5rem;
}
.topbar-title{line-height:1.15;min-width:0;}
.topbar-title .eyebrow{display:block;margin-bottom:1px;}
.topbar-title strong{
    font-family:var(--ff-display);font-weight:600;font-size:1.02rem;letter-spacing:-.01em;
    display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.topbar-actions{margin-left:auto;display:flex;align-items:center;gap:.6rem;}
.content{padding:2.25rem 1.75rem 4rem;width:100%;flex:1 0 auto;}
.narrow{max-width:780px;margin-inline:auto;}
.wide{max-width:1180px;margin-inline:auto;}

/* ===== Buttons / chips ===== */
.btn-icon{
    width:38px;height:38px;border-radius:11px;border:1px solid var(--border);
    background:var(--surface);color:var(--fg-2);display:grid;place-items:center;
    cursor:pointer;transition:.15s;font-size:1rem;
}
.btn-icon:hover{color:var(--primary);border-color:var(--primary);}
.btn{
    display:inline-flex;align-items:center;gap:.5rem;padding:.6rem 1.1rem;
    border-radius:.65rem;border:1px solid transparent;font-weight:600;font-size:.92rem;
    cursor:pointer;transition:.15s;text-decoration:none;
}
.btn:hover{text-decoration:none;}
.btn-primary{background:var(--primary);color:#fff;}
.btn-primary:hover{background:var(--primary-hover);color:#fff;}
.btn-ghost{background:var(--surface);border-color:var(--border);color:var(--fg);}
.btn-ghost:hover{border-color:var(--primary);color:var(--primary);}
.chip{
    display:inline-flex;align-items:center;gap:.4rem;padding:.24rem .7rem;border-radius:999px;
    font-size:.74rem;font-weight:600;background:var(--surface-soft);color:var(--fg-2);
    font-family:var(--ff-mono);letter-spacing:.06em;text-transform:uppercase;
}
.chip-foundations{color:var(--accent-order);}
.chip-security{color:var(--accent-report);}
.chip-ai{color:var(--accent-mgmt);}
.chip-ops{color:var(--accent-system);}

/* ===== Panels ===== */
.panel{
    background:var(--surface);border:1px solid var(--border);border-radius:1.15rem;
    box-shadow:var(--shadow);overflow:hidden;
}
.panel-header{
    padding:1rem 1.25rem;border-bottom:1px solid var(--border);
    display:flex;align-items:center;justify-content:space-between;gap:1rem;
}
.panel-header h3{margin:0;font-size:1.02rem;}
.panel-body{padding:1.25rem;}

/* ===== Hero (index) ===== */
.hero{
    border-radius:1.4rem;padding:3rem 2.25rem;margin-bottom:2.5rem;
    background:linear-gradient(140deg,var(--sidebar-bg) 0%,#13224d 60%,#1b2f63 100%);
    color:#eaedf5;box-shadow:var(--shadow-lift);position:relative;overflow:hidden;
}
.hero::after{
    content:"";position:absolute;right:-90px;top:-90px;width:340px;height:340px;
    background:radial-gradient(circle,rgba(59,118,240,.35),transparent 65%);
}
.hero h1{color:#fff;max-width:20ch;position:relative;}
.hero .eyebrow{color:#7f92c4;position:relative;}
.hero p{color:#b9c3da;max-width:62ch;font-size:1.08rem;position:relative;}
.hero-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.5rem;position:relative;}

/* ===== Stat strip ===== */
.stats{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
    gap:1rem;margin:0 0 3rem;
}
.stat{
    background:var(--surface);border:1px solid var(--border);border-radius:1rem;
    padding:1.1rem 1.25rem;box-shadow:var(--shadow);
}
.stat-label{
    font-family:var(--ff-mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;
    color:var(--fg-3);display:block;margin-bottom:.3rem;
}
.stat-value{font-family:var(--ff-display);font-size:1.7rem;font-weight:700;letter-spacing:-.02em;}
.stat-note{font-size:.82rem;color:var(--fg-2);}

/* ===== Article cards ===== */
.section-head{margin:3rem 0 1.25rem;}
.section-head h2{margin:.15rem 0 .25rem;}
.section-head p{color:var(--fg-2);margin:0;max-width:70ch;}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1.1rem;}
.card{
    display:flex;flex-direction:column;gap:.6rem;
    background:var(--surface);border:1px solid var(--border);border-radius:1.15rem;
    padding:1.35rem;box-shadow:var(--shadow);
    transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
    color:inherit;text-decoration:none;
}
.card:hover{
    transform:translateY(-3px);box-shadow:var(--shadow-soft);
    border-color:var(--primary);text-decoration:none;color:inherit;
}
.card-num{font-family:var(--ff-mono);font-size:.72rem;color:var(--fg-3);letter-spacing:.14em;}
.card h3{margin:0;font-size:1.12rem;}
.card p{margin:0;color:var(--fg-2);font-size:.93rem;line-height:1.55;}
.card-foot{
    margin-top:auto;padding-top:.6rem;display:flex;align-items:center;gap:.6rem;
    font-family:var(--ff-mono);font-size:.7rem;letter-spacing:.1em;
    text-transform:uppercase;color:var(--fg-3);
}

/* ===== Article body ===== */
.article-header{margin-bottom:2.25rem;}
.article-header .meta{
    display:flex;flex-wrap:wrap;align-items:center;gap:.75rem;margin-bottom:.9rem;
}
.article-header .lede{font-size:1.14rem;color:var(--fg-2);margin-top:.75rem;}
.article-body h2{scroll-margin-top:calc(var(--topbar-height) + 1rem);}
.article-body ul,.article-body ol{margin:0 0 1.2rem;padding-left:1.35rem;}
.article-body li{margin-bottom:.45rem;}
.article-body li::marker{color:var(--fg-3);}

code{
    font-family:var(--ff-mono);font-size:.86em;
    background:var(--surface-inset);color:var(--fg);
    padding:.14em .4em;border-radius:.35rem;
}
pre{
    background:var(--code-bg);color:var(--code-fg);border:1px solid var(--border);
    border-radius:.9rem;padding:1.1rem 1.25rem;overflow-x:auto;margin:0 0 1.4rem;
    font-size:.85rem;line-height:1.6;
}
pre code{background:none;color:inherit;padding:0;font-size:inherit;}

blockquote{
    margin:0 0 1.4rem;padding:.35rem 0 .35rem 1.25rem;
    border-left:3px solid var(--primary);color:var(--fg-2);font-style:italic;
}

.callout{
    border:1px solid var(--border);border-left:4px solid var(--accent-system);
    background:var(--surface);border-radius:.9rem;padding:1.1rem 1.25rem;margin:0 0 1.5rem;
    box-shadow:var(--shadow);
}
.callout .callout-title{
    font-family:var(--ff-mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
    color:var(--fg-3);display:block;margin-bottom:.45rem;
}
.callout p:last-child,.callout ul:last-child{margin-bottom:0;}
.callout-honest{border-left-color:var(--accent-report);}
.callout-tip{border-left-color:var(--primary);}

table{width:100%;border-collapse:collapse;margin:0 0 1.5rem;font-size:.92rem;}
.table-wrap{overflow-x:auto;margin-bottom:1.5rem;}
.table-wrap table{margin-bottom:0;}
th,td{text-align:left;padding:.6rem .75rem;border-bottom:1px solid var(--border);vertical-align:top;}
th{
    font-family:var(--ff-mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
    color:var(--fg-3);font-weight:500;
}

.article-nav{
    display:flex;gap:1rem;flex-wrap:wrap;justify-content:space-between;
    margin-top:3.5rem;padding-top:1.75rem;border-top:1px solid var(--border);
}
.article-nav a{
    flex:1 1 240px;background:var(--surface);border:1px solid var(--border);
    border-radius:1rem;padding:.9rem 1.1rem;text-decoration:none;color:inherit;
    transition:border-color .15s,transform .15s;
}
.article-nav a:hover{border-color:var(--primary);transform:translateY(-2px);text-decoration:none;}
.article-nav .dir{
    font-family:var(--ff-mono);font-size:.66rem;letter-spacing:.16em;
    text-transform:uppercase;color:var(--fg-3);display:block;margin-bottom:.2rem;
}
.article-nav .ttl{font-family:var(--ff-display);font-weight:600;font-size:.98rem;}
.article-nav .next{text-align:right;}

/* ===== Site footer ===== */
.site-footer{
    margin-top:auto;background:var(--sidebar-bg);color:var(--sidebar-text);
    padding:2.5rem 1.75rem 2rem;
}
.footer-inner{
    max-width:1180px;margin-inline:auto;display:flex;flex-wrap:wrap;gap:1.75rem;
    align-items:center;justify-content:space-between;
}
.footer-brand{display:flex;align-items:center;gap:.75rem;color:#fff;}
.footer-logo{color:#fff;width:34px;height:34px;}
.footer-word{
    font-family:'Playfair Display',Georgia,'Times New Roman',serif;
    font-weight:600;font-size:1.3rem;line-height:1.1;color:#fff;
}
.footer-tag{font-size:.82rem;color:var(--sidebar-heading);}
.footer-links{display:flex;flex-wrap:wrap;gap:.4rem 1.75rem;}
.footer-links a{
    color:var(--sidebar-text);text-decoration:none;font-size:.9rem;
    border-bottom:1px solid transparent;transition:color .15s,border-color .15s;
}
.footer-links a:hover{color:#fff;text-decoration:none;border-bottom-color:var(--primary);}
.footer-fine{
    max-width:1180px;margin:1.75rem auto 0;padding-top:1.25rem;
    border-top:1px solid rgba(255,255,255,.08);
    font-size:.78rem;color:var(--sidebar-heading);
}

/* ===== Responsive ===== */
.sidebar-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:1049;display:none;}
.sidebar-backdrop.show{display:block;}
.menu-toggle{display:none;}
@media (max-width:991.98px){
    .sidebar{transform:translateX(-100%);transition:transform .2s;box-shadow:var(--shadow-lift);}
    .sidebar.show{transform:translateX(0);}
    .main{margin-left:0;}
    .menu-toggle{display:grid;}
    .content{padding:1.5rem 1.1rem 3rem;}
    .hero{padding:2.25rem 1.5rem;}
    .site-footer{padding:2rem 1.1rem 1.75rem;}
    .footer-inner{gap:1.25rem;}
}
@media print{
    .sidebar,.topbar,.article-nav,.sidebar-backdrop,.site-footer{display:none;}
    .main{margin-left:0;}
}