/* ==========================================================================
THEME — SilentSoap shared design system
Reuse this file as-is in any new internal tool to match the brand:
Birch Paper background, Deep Pine sidebar, Dusty Terracotta accent,
Cormorant Garamond display type, Jost body/UI type. Single light theme —
there is no dark mode; the only user-facing toggle is the sidebar's
Pine / Birch accent switch (see SIDEBAR THEME TOGGLE below).
========================================================================== */
:root{
--bg:#F4EEE2; /* Birch Paper — page background */
--surface:#FBF7EE; /* cards, panels, top bars */
--surface2:#F6F0E4; /* nested/inset — table headers, toolbars */
--border:#E4DBCA;
--border-strong:#cfc4ad;
--text:#2F2D27; /* Soft Charcoal — primary text */
--muted:#6c6856; /* secondary text */
--faint:#9a9582; /* tertiary / labels / placeholders */
--pine:#38473B; /* Deep Pine — strong accent, sidebar */
--sage:#94A089; /* Muted Sage — soft accent */
--accent:#B47D5E; /* Dusty Terracotta — primary CTA */
--accent-hover:#9d6a4d;
--in:#46583F; --inbg:rgba(148,160,137,0.20); --indot:#7E9270; /* in stock / available */
--low:#8A4F34; --lowbg:rgba(180,125,94,0.18); --lowdot:#B47D5E; /* low stock / warning */
--cure:#7A5F23; --curebg:rgba(169,140,78,0.20); --curedot:#A98C4E; /* curing / in-progress */
--out:#7C3A2C; --outbg:rgba(158,91,74,0.18); --outdot:#9E5B4A; /* out of stock / danger */
--shadow-card:0 1px 3px rgba(47,45,39,.06);
--shadow-toast:0 8px 28px rgba(47,45,39,.18);
--radius:0; /* the brand is sharp-cornered throughout the internal tools */
/* --- fonts ---
Load these from Google Fonts (see snippet at bottom of this file) */
--font:'Jost', sans-serif; /* body/UI text */
--mono:'Jost', sans-serif; /* labels, meta, tabular data — same family, see .tabular */
--disp:'Cormorant Garamond', serif; /* display headings */
/* --- sidebar theme (default: Pine) ---
Toggle by setting data-sidebar="birch" on — see SIDEBAR THEME below */
--sb-bg:var(--pine);
--sb-fg:#F4EEE2;
--sb-muted:rgba(244,238,226,0.55);
--sb-active-bg:rgba(244,238,226,0.10);
--sb-border:rgba(244,238,226,0.12);
--sb-logo:#F4EEE2;
color-scheme:light;
}
:root[data-sidebar="birch"]{
--sb-bg:#E8E0D0;
--sb-fg:#2F2D27;
--sb-muted:#8b8772;
--sb-active-bg:#FBF7EE;
--sb-border:rgba(47,45,39,0.12);
--sb-logo:#38473B;
}
/* --- resets --- */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;}
body{
background:var(--bg);
color:var(--text);
font-family:var(--font);
font-weight:300;
min-height:100vh;
}
button,input,select,textarea{font-family:var(--font);}
a{color:inherit;text-decoration:none;}
.tabular{font-variant-numeric:tabular-nums;}
/* ==========================================================================
TYPE
========================================================================== */
.h-display{
font-family:var(--disp);
font-weight:600;
letter-spacing:0;
line-height:1.05;
}
/* Example sizes — adjust per use:
page title: font-size: 2.1rem (34px);
panel h2: font-size: 1.25rem (20px);
card: font-size: 1.7rem;
*/
.label{
font-family:var(--mono);
font-size:.7rem;
letter-spacing:.14em;
color:var(--faint);
text-transform:uppercase;
}
/* ==========================================================================
LAYOUT
========================================================================== */
.pad{padding:22px 16px 38px;max-width:1400px;margin:0 auto;}
.topbar{
display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
padding:11px 20px; border-bottom:1px solid var(--border); background:var(--surface);
}
/* ==========================================================================
APP SHELL — persistent sidebar + top bar, used by multi-page internal
tools (warehouse, and any future back-office system built on this theme)
========================================================================== */
.app-shell{display:flex;height:100vh;width:100%;overflow:hidden;}
.sidebar{
width:240px;flex-shrink:0;height:100%;display:flex;flex-direction:column;
background:var(--sb-bg);color:var(--sb-fg);border-right:1px solid var(--sb-border);
transition:background .2s,color .2s;
}
.sidebar-brand{
display:flex;align-items:center;gap:11px;padding:15px 18px;
border-bottom:1px solid var(--sb-border);color:var(--sb-logo);
}
.sidebar-brand .name{font-family:var(--disp);font-size:21px;font-weight:600;line-height:1;}
.sidebar-brand .tag{font-size:8.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--sb-muted);margin-top:2px;background:none;padding:0;font-family:var(--mono);}
.sidebar-nav{flex:1;overflow-y:auto;padding:10px;}
.nav-group-label{font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--sb-muted);padding:6px 10px;margin-top:8px;}
.nav-group-label:first-child{margin-top:0;}
.nav-link{
display:flex;align-items:center;gap:11px;padding:6.75px 14px 6.75px 12px;
font-size:13px;letter-spacing:.02em;cursor:pointer;color:var(--sb-muted);
border-left:2px solid transparent;transition:background .15s,color .15s;
}
.nav-link:hover{background:var(--sb-active-bg);color:var(--sb-fg);}
.nav-link.active{background:var(--sb-active-bg);color:var(--sb-fg);border-left-color:var(--accent);}
.nav-link svg{flex-shrink:0;}
.sidebar-footer{padding:7.5px 10px;border-top:1px solid var(--sb-border);}
.sidebar-footer .nav-link{margin-bottom:1.5px;}
.avatar-badge{
width:30px;height:30px;flex-shrink:0;background:var(--accent);color:#F4EEE2;
display:flex;align-items:center;justify-content:center;font-size:12px;letter-spacing:.04em;
font-family:var(--disp);font-weight:600;
}
.sidebar-user{display:flex;align-items:center;gap:11px;padding:6.75px 12px;}
.sidebar-user .who{min-width:0;}
.sidebar-user .who-name{font-size:12.5px;color:var(--sb-fg);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sidebar-user .who-role{font-size:10px;color:var(--sb-muted);}
.main-col{flex:1;min-width:0;height:100%;display:flex;flex-direction:column;}
.topbar-app{
height:60px;flex-shrink:0;background:var(--surface);border-bottom:1px solid var(--border);
display:flex;align-items:center;gap:20px;padding:0 28px;
}
.crumb{font-size:12px;letter-spacing:.04em;color:var(--faint);}
.search-box{
display:flex;align-items:center;gap:9px;background:var(--bg);border:1px solid var(--border);
padding:6px 12px;width:280px;
}
.search-box input{border:none;background:transparent;outline:none;font-size:13px;color:var(--text);width:100%;}
.seg{display:flex;align-items:center;border:1px solid var(--border);}
.seg .seg-label{padding:3px 8px 3px 11px;font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);border-right:1px solid var(--border);}
.seg button{padding:4.5px 13px;font-size:10.5px;letter-spacing:.08em;cursor:pointer;border:none;border-left:1px solid var(--border);background:transparent;color:var(--muted);}
.seg button:first-of-type{border-left:none;}
.seg button.active{background:var(--pine);color:#F4EEE2;}
.scroll-area{flex:1;overflow-y:auto;background:var(--bg);}
/* ==========================================================================
THEME TOGGLE (legacy — see SIDEBAR THEME TOGGLE for the current pattern)
========================================================================== */
.theme-toggle{
display:inline-flex; align-items:center; gap:5px;
font-family:var(--mono); font-size:.74rem; color:var(--muted);
background:transparent; border:1px solid var(--border); border-radius:var(--radius);
padding:5px 8px; cursor:pointer;
}
.theme-toggle:hover{border-color:var(--border-strong);color:var(--text);}
/* ==========================================================================
BUTTONS & FORM CONTROLS
========================================================================== */
.btn{
padding:9px 18px;border-radius:var(--radius);font-size:11.5px;font-weight:400;cursor:pointer;border:none;
font-family:var(--mono);letter-spacing:.14em;text-transform:uppercase;
display:inline-flex;align-items:center;gap:9px;transition:background .2s,color .2s,border-color .2s;
}
.btn.amber{background:var(--accent);color:#F4EEE2;}
.btn.amber:hover{background:var(--accent-hover);}
.btn.ghost{background:transparent;color:var(--pine);border:1px solid var(--pine);}
.btn.ghost:hover{background:var(--pine);color:#F4EEE2;}
.btn.danger{background:transparent;color:var(--out);border:1px solid var(--out);}
.btn.danger:hover{background:var(--out);color:#F4EEE2;}
.input{
width:100%; background:var(--surface); border:1px solid var(--border);
border-radius:var(--radius); padding:8.25px 13px; color:var(--text); font-size:14px; outline:none;
}
.input:focus{border-color:var(--pine);}
label.field{display:block;margin-bottom:11px;}
label.field .lab{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:6px;}
input[type="checkbox"]{accent-color:var(--pine);}
/* ==========================================================================
CARDS
========================================================================== */
.card{
background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
padding:15px 14px; cursor:pointer;
display:flex; flex-direction:column; justify-content:center;
min-height:82px;
transition:border-color .15s, background .15s;
box-shadow:var(--shadow-card);
}
.card:hover{border-color:var(--border-strong);}
.card .cardname{font-family:var(--disp);font-weight:600;font-size:1.7rem;letter-spacing:0;line-height:1.1;margin-bottom:5px;color:var(--text);}
.card .cardsub{font-family:var(--mono);font-size:.76rem;color:var(--muted);letter-spacing:.02em;line-height:1.35;}
.grid{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:11px;}
/* ==========================================================================
PANELS (grouped settings/content blocks)
========================================================================== */
.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:17px;margin-bottom:17px;box-shadow:var(--shadow-card);}
.panel h2{font-family:var(--disp);font-size:1.25rem;letter-spacing:0;margin:0 0 3px;font-weight:600;color:var(--text);}
/* ==========================================================================
KPI TILES
========================================================================== */
.kpi-tile{background:var(--surface);border:1px solid var(--border);padding:13.5px 18px 12px;}
.kpi-label{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-bottom:9px;}
.kpi-value{font-family:var(--font);font-size:35px;font-weight:400;line-height:.9;letter-spacing:.01em;color:var(--text);}
.kpi-delta{font-size:11.5px;color:var(--muted);margin-top:7.5px;}
/* ==========================================================================
DATA TABLES — pair with an inline/page-level grid-template-columns
========================================================================== */
.dtable{background:var(--surface);border:1px solid var(--border);}
.dtable-head{
display:grid;gap:12px;padding:9px 18px;font-size:10px;letter-spacing:.12em;text-transform:uppercase;
color:var(--faint);border-bottom:1px solid var(--border);background:var(--surface2);
}
.dtable-row{
display:grid;gap:12px;padding:9.75px 18px;font-size:13px;color:var(--text);
border-bottom:1px solid var(--border);align-items:center;
}
.dtable-row:last-child{border-bottom:none;}
.dtable-row.clickable{cursor:pointer;}
.dtable-row.clickable:hover{background:var(--surface2);}
/* ==========================================================================
TAGS & STATUS PILLS
========================================================================== */
.tag{
font-family:var(--mono);font-size:.66rem;color:#F4EEE2;background:var(--accent);
padding:3px 7px 2px;border-radius:var(--radius);letter-spacing:.04em;font-weight:600;
line-height:1;display:inline-flex;align-items:center;
}
.pill{
font-family:var(--mono);font-size:11px;letter-spacing:.03em;padding:3px 9px;border-radius:var(--radius);
display:inline-flex;align-items:center;gap:6px;
}
.pill::before{content:"";width:6px;height:6px;flex-shrink:0;background:currentColor;}
.pill.in{color:var(--in);background:var(--inbg);}
.pill.in::before{background:var(--indot);}
.pill.low{color:var(--low);background:var(--lowbg);}
.pill.low::before{background:var(--lowdot);}
.pill.cure{color:var(--cure);background:var(--curebg);}
.pill.cure::before{background:var(--curedot);}
.pill.out{color:var(--out);background:var(--outbg);}
.pill.out::before{background:var(--outdot);}
/* ==========================================================================
FEEDBACK
========================================================================== */
.flash{background:var(--inbg);border:1px solid var(--in);color:var(--in);border-radius:var(--radius);padding:8px 12px;font-size:.88rem;margin-bottom:14px;}
.flash.err{background:var(--outbg);border-color:var(--out);color:var(--out);}
.toast{
position:fixed;bottom:18px;left:50%;transform:translateX(-50%);z-index:200;
padding:9px 17px;border-radius:var(--radius);font-size:.9rem;font-weight:400;letter-spacing:.02em;
box-shadow:var(--shadow-toast);border:1px solid var(--border);background:var(--surface);color:var(--text);
}
.toast.in{background:var(--inbg);border-color:var(--in);color:var(--in);}
.toast.out,.toast.err{background:var(--outbg);border-color:var(--out);color:var(--out);}
.empty{color:var(--muted);font-size:.92rem;text-align:center;padding:38px 14px;line-height:1.6;}
/* ==========================================================================
FONTS — add this to your HTML :
SIDEBAR THEME TOGGLE — the brand has one light theme; the only user
preference is the sidebar's Pine (dark) / Birch (light) accent. Add this
markup to the top bar of any page that has a .sidebar, and this script
to every such page:
Sidebar
========================================================================== */