/* =========================================================================
Bent Tail Studio — Web Design System (single file)
Drop this into any new page with one line:
Fonts auto-load from Google Fonts. Everything else uses var(--token).
========================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700;800&family=Inter:wght@400;500;600;700&family=Source+Code+Pro:wght@400;500;600&display=swap');
:root{
/* ---- Base palette (Nord) ---- */
--nord0:#2E3440; --nord1:#3B4252; --nord2:#434C5E; --nord3:#4C566A;
--nord4:#D8DEE9; --nord5:#E5E9F0; --nord6:#ECEFF4;
--nord7:#8FBCBB; --nord8:#88C0D0; --nord9:#81A1C1; --nord10:#5E81AC;
--nord11:#BF616A; --nord12:#D08770; --nord13:#EBCB8B; --nord14:#A3BE8C; --nord15:#B48EAD;
/* ---- Semantic colors ---- */
--color-ink:var(--nord0);
--color-ink-soft:var(--nord2);
--color-ink-muted:var(--nord3);
--color-paper:#FFFFFF;
--color-canvas:var(--nord6);
--color-surface:var(--nord5);
--color-surface-sunken:var(--nord4);
--color-border:var(--nord4);
--color-border-strong:var(--nord3);
--color-brand:var(--nord10);
--color-brand-hover:#4E6D93;
--color-brand-press:#3F5A7A;
--color-brand-soft:#E3EBF3;
--color-accent:var(--nord12);
--color-accent-hover:#BC7259;
--color-accent-soft:#F6E7E0;
--color-success:var(--nord14);
--color-success-soft:#EBF2E4;
--color-warning:var(--nord13);
--color-warning-soft:#FBF3DF;
--color-danger:var(--nord11);
--color-danger-soft:#F6E5E6;
--color-info:var(--nord8);
--color-info-soft:#E5F2F5;
--color-text:var(--nord0);
--color-text-muted:var(--nord3);
--color-text-on-brand:#FFFFFF;
--color-link:var(--nord10);
--color-link-hover:var(--nord9);
/* ---- Type ---- */
--font-display:'Poppins',"Segoe UI",system-ui,sans-serif;
--font-body:'Inter',"Segoe UI",system-ui,sans-serif;
--font-mono:'Source Code Pro',ui-monospace,Menlo,monospace;
--text-display-xl:3.75rem; --text-display-l:2.75rem; --text-display-m:1.75rem; --text-display-s:1.375rem;
--text-body-l:1.125rem; --text-body-m:1rem; --text-body-s:0.875rem;
--text-caption:0.75rem; --text-mono-m:0.9375rem; --text-mono-s:0.8125rem;
--leading-tight:1.1; --leading-snug:1.3; --leading-normal:1.55; --leading-relaxed:1.7;
--weight-regular:400; --weight-medium:500; --weight-semibold:600; --weight-bold:700; --weight-extrabold:800;
/* ---- Spacing ---- */
--space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px;
--space-6:32px; --space-7:48px; --space-8:64px; --space-9:96px; --space-10:128px;
/* ---- Radius / Shadow / Motion ---- */
--radius-s:6px; --radius-m:10px; --radius-l:16px; --radius-xl:24px; --radius-pill:999px;
--shadow-s:0 1px 2px rgba(46,52,64,0.08);
--shadow-m:0 4px 12px rgba(46,52,64,0.10);
--shadow-l:0 12px 32px rgba(46,52,64,0.14);
--shadow-inset:inset 0 0 0 1px var(--color-border);
--ease-standard:cubic-bezier(.4,0,.2,1);
--ease-out:cubic-bezier(.2,.7,.3,1);
--duration-fast:120ms; --duration-normal:200ms; --duration-slow:320ms;
--container-max:1200px;
}
/* ===================== BASE ELEMENTS ===================== */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
margin:0; background:var(--color-canvas); color:var(--color-text);
font-family:var(--font-body); font-size:var(--text-body-m);
line-height:var(--leading-normal); -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:var(--font-display); line-height:var(--leading-tight); margin:0 0 var(--space-4); font-weight:var(--weight-bold);}
h1{font-size:var(--text-display-xl); font-weight:var(--weight-extrabold);}
h2{font-size:var(--text-display-m);}
h3{font-size:var(--text-display-s);}
p{margin:0 0 var(--space-4);}
a{color:var(--color-link); text-decoration:none; transition:color var(--duration-fast) var(--ease-standard);}
a:hover{color:var(--color-link-hover);}
.mono{font-family:var(--font-mono);} /* prices, SKUs, order IDs */
.muted{color:var(--color-text-muted);}
/* ===================== LAYOUT ===================== */
.bt-container{max-width:var(--container-max); margin:0 auto; padding:0 var(--space-5);}
.bt-section{padding:var(--space-8) 0;}
/* ===================== COMPONENTS ===================== */
/* Buttons: radius-m, soft only, darken ~8-10% on hover (handled by token states) */
.bt-btn{
display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2);
font-family:var(--font-body); font-weight:var(--weight-semibold); font-size:var(--text-body-m);
padding:0 var(--space-5); height:48px; border-radius:var(--radius-m);
border:1px solid transparent; cursor:pointer;
transition:background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
}
.bt-btn--primary{background:var(--color-brand); color:var(--color-text-on-brand);}
.bt-btn--primary:hover{background:var(--color-brand-hover);}
.bt-btn--primary:active{background:var(--color-brand-press);}
.bt-btn--ghost{background:transparent; color:var(--color-brand); border-color:var(--color-border-strong);}
.bt-btn--ghost:hover{background:var(--color-brand-soft);}
/* Nav link */
.bt-nav-link{color:var(--color-ink); font-family:var(--font-body); font-weight:var(--weight-medium); cursor:pointer; transition:color var(--duration-fast) var(--ease-standard);}
.bt-nav-link:hover{color:var(--color-brand);}
.bt-nav-link.is-active{color:var(--color-brand);}
/* Card */
.bt-card{background:var(--color-paper); border-radius:var(--radius-l); box-shadow:var(--shadow-s); border:1px solid var(--color-border); overflow:hidden;}
/* Badge: pill, tone modifiers */
.bt-badge{display:inline-flex; align-items:center; height:22px; padding:0 var(--space-3); border-radius:var(--radius-pill); font-family:var(--font-body); font-size:var(--text-caption); font-weight:var(--weight-semibold);}
.bt-badge--sale{background:var(--color-accent-soft); color:var(--color-accent);}
.bt-badge--new{background:var(--color-info-soft); color:var(--color-info);}
.bt-badge--success{background:var(--color-success-soft); color:var(--color-success);}
.bt-badge--warning{background:var(--color-warning-soft); color:#8a6d1f;}
.bt-badge--danger{background:var(--color-danger-soft); color:var(--color-danger);}
/* Image slot: placeholder convention — swap background/child ![]()
for real photography */
.bt-image-slot{
display:flex; align-items:center; justify-content:center; text-align:center;
background:var(--color-surface-sunken); color:var(--color-text-muted);
border-radius:var(--radius-m); font-family:var(--font-body); font-size:var(--text-body-s);
min-height:160px; padding:var(--space-4);
}
.bt-image-slot img{width:100%; height:100%; object-fit:cover; border-radius:inherit; display:block;}
/* Sticky header shell (storefront) */
.bt-header{position:sticky; top:0; z-index:10; display:flex; align-items:center; justify-content:space-between; gap:var(--space-5); padding:var(--space-4) var(--space-5); background:var(--color-paper); border-bottom:1px solid var(--color-border);}
.bt-header .bt-nav{display:flex; align-items:center; gap:var(--space-6);}
/* Dark footer / sidebar shell */
.bt-footer{background:var(--color-ink); color:var(--nord4); padding:var(--space-8) 0 var(--space-5);}
.bt-footer a{color:var(--nord4);} .bt-footer a:hover{color:#fff;}
/* Product grid: 4 columns, responsive */
.bt-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-5);}
@media (max-width:900px){ .bt-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:520px){ .bt-grid{grid-template-columns:1fr;} }
/* ===================== STOREFRONT COMPONENTS (Phase 1) =====================
All values below use design-system tokens only. No raw hex in component CSS
except the neutral placeholder SVG (a temporary graphic, swapped for photos). */
/* Product card */
.bt-product-card{display:flex;flex-direction:column;}
.bt-product-media{display:block;}
.bt-image-slot{position:relative;aspect-ratio:4/5;flex-direction:column;gap:var(--space-2);}
.bt-slot-caption{font-size:var(--text-caption);opacity:.6;}
.bt-product-body{padding:var(--space-4);display:flex;flex-direction:column;gap:var(--space-2);}
.bt-product-name h3{margin:0;font-size:var(--text-display-s);}
.bt-product-price{font-size:var(--text-mono-m);color:var(--color-text-muted);}
.bt-product-cta{margin-top:var(--space-2);width:100%;}
/* Category tabs */
.bt-tabs{display:flex;gap:var(--space-2);flex-wrap:wrap;margin-bottom:var(--space-5);}
.bt-tab{font-family:var(--font-body);font-size:var(--text-body-s);font-weight:var(--weight-medium);
padding:var(--space-2) var(--space-4);border-radius:var(--radius-pill);border:1px solid var(--color-border);
background:var(--color-paper);color:var(--color-text-muted);cursor:pointer;
transition:background var(--duration-fast) var(--ease-standard),color var(--duration-fast) var(--ease-standard),border-color var(--duration-fast) var(--ease-standard);}
.bt-tab.is-active{background:var(--color-ink);border-color:var(--color-ink);color:#fff;}
.bt-tab:hover:not(.is-active){border-color:var(--color-ink);color:var(--color-ink);}
/* Section heads */
.bt-section-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:var(--space-5);}
.bt-section-head h2{font-size:var(--text-display-m);margin:0;}
/* Hero (home) */
.bt-hero{position:relative;background:linear-gradient(160deg,var(--nord0),var(--nord2));color:#fff;padding:var(--space-9) 0;overflow:hidden;}
.bt-hero .bt-container{display:flex;flex-direction:column;gap:var(--space-4);align-items:flex-start;}
.bt-hero h1{color:#fff;max-width:640px;}
.bt-hero p{color:rgba(255,255,255,.85);max-width:480px;font-size:var(--text-body-l);margin:0;}
.bt-hero .bt-btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.55);}
.bt-hero .bt-btn--ghost:hover{background:rgba(255,255,255,.1);border-color:#fff;}
/* Product detail (PDP) */
.bt-pdp{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-8);align-items:start;padding:var(--space-7) 0;}
@media (max-width:860px){.bt-pdp{grid-template-columns:1fr;gap:var(--space-5);}}
.bt-pdp-slot{aspect-ratio:4/5;}
.bt-pdp-title{font-size:var(--text-display-m);margin:var(--space-2) 0 var(--space-2);}
.bt-pdp-price{font-size:1.25rem;margin-bottom:var(--space-4);}
.bt-pdp-desc{color:var(--color-text-muted);line-height:var(--leading-normal);margin:0 0 var(--space-5);max-width:480px;}
.bt-pdp-btns{display:flex;gap:var(--space-3);flex-wrap:wrap;margin-bottom:var(--space-6);}
.bt-feat-list{border-top:1px solid var(--color-border);padding-top:var(--space-4);display:flex;flex-direction:column;gap:var(--space-3);max-width:480px;}
.bt-feat{display:flex;gap:var(--space-3);align-items:flex-start;font-size:var(--text-body-s);color:var(--color-text-muted);line-height:var(--leading-normal);}
.bt-feat-dot{width:6px;height:6px;border-radius:50%;background:var(--color-brand);margin-top:7px;flex-shrink:0;}
/* Related products */
.bt-related-strip{padding:var(--space-6) 0 var(--space-8);}
.bt-related-strip h2{font-size:var(--text-display-s);margin:0 0 var(--space-4);}
.bt-related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4);}
@media (max-width:760px){.bt-related-grid{grid-template-columns:1fr;}}
.bt-related-card{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-m);transition:border-color var(--duration-fast) var(--ease-standard);}
.bt-related-card:hover{border-color:var(--color-ink);}
.bt-related-thumb{width:56px;height:56px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--color-surface-sunken);border-radius:var(--radius-s);}
.bt-related-name{font-size:var(--text-body-s);font-weight:var(--weight-medium);}
.bt-related-price{font-size:var(--text-mono-s);color:var(--color-text-muted);}
/* Footer grid layout */
.bt-footer .bt-container{padding:var(--space-8) var(--space-5) var(--space-5);}
.bt-footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:var(--space-6);}
@media (max-width:760px){.bt-footer-grid{grid-template-columns:1fr 1fr;}}
.bt-footer-brand{display:flex;flex-direction:column;gap:var(--space-3);}
.bt-footer-brand img{height:22px;width:auto;}
.bt-footer-brand p{font-size:var(--text-body-s);opacity:.7;max-width:280px;line-height:var(--leading-normal);margin:0;}
.bt-footer-col{display:flex;flex-direction:column;gap:var(--space-2);font-size:var(--text-body-s);}
.bt-col-label{opacity:.5;text-transform:uppercase;letter-spacing:.04em;font-size:var(--text-caption);margin-bottom:var(--space-1);}
.bt-footer-bottom{border-top:1px solid var(--color-border-strong);margin-top:var(--space-5);padding-top:var(--space-4);font-size:var(--text-caption);opacity:.6;display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--space-2);}
/* Page-level spacing helpers */
.bt-page-head{padding:var(--space-7) 0 var(--space-4);}
/* Site notice banner (e.g. "Under construction") — on-brand warning tone */
.bt-notice{display:flex;align-items:center;justify-content:center;gap:var(--space-3);
padding:var(--space-3) var(--space-5);background:var(--color-warning-soft);
color:#8a6d1f;border-bottom:1px solid var(--color-warning);font-family:var(--font-body);
font-size:var(--text-body-s);line-height:var(--leading-normal);text-align:center;}
.bt-notice svg{flex-shrink:0;}
.bt-notice strong{font-weight:var(--weight-semibold);}
@media (max-width:560px){.bt-notice{font-size:var(--text-caption);padding:var(--space-2) var(--space-4);}}
.bt-page-head h1{font-size:var(--text-display-l);margin:0;}