/* ==========================================================================
   PIPER MOSS - deck designer interface skin
   Loaded last on /deck-designer. Overrides the tool's own palette and type
   tokens so the whole interface sits on the brand: white ground, green
   accent, Gopher type, square corners.
   Timber SAMPLE swatches keep their true material colours, because a
   decking swatch has to be honest about the timber it represents.
   ========================================================================== */

@font-face{font-family:'Gopher';src:url('/fonts/gopher-regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Gopher';src:url('/fonts/gopher-medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Gopher';src:url('/fonts/gopher-bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Gopher Text';src:url('/fonts/gophertext-regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Gopher Text';src:url('/fonts/gophertext-medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}

:root{
  /* ---- palette ---- */
  --ink:#2c3639;
  --ink-soft:#25403b;
  --ink-mute:#5f6f6a;
  --line:#c9d5d1;
  --line-soft:#e4eae8;
  --paper:#ffffff;
  --paper-deep:#f4f6f5;
  --paper-warm:#ffffff;
  --timber:#33554f;
  --timber-light:#3f665c;
  --timber-dark:#25403b;
  --stone:#8f9a97;
  --stone-deep:#5f6f6a;
  --water:#93b0a8;
  --water-deep:#4d786d;
  --sky:#ffffff;
  --accent:#33554f;
  --accent-soft:#3f665c;
  --accent-glow:#e4eae8;
  --gold:#33554f;
  --danger:#25403b;

  /* ---- type: Gopher throughout ---- */
  --font-display:'Gopher','Figtree',-apple-system,BlinkMacSystemFont,sans-serif;
  --font-body:'Gopher Text','Gopher','Figtree',-apple-system,BlinkMacSystemFont,sans-serif;
  --font-mono:'Gopher Text','Gopher','Figtree',ui-monospace,monospace;
  --font-sans:'Gopher Text','Gopher','Figtree',sans-serif;
  --font-serif:'Gopher','Figtree',serif;
}

*,*::before,*::after{border-radius:0 !important}

body{font-family:var(--font-body);background:#ffffff;color:#2c3639}
h1,h2,h3,h4,h5{font-family:var(--font-display);font-weight:500;letter-spacing:-.015em;color:#2c3639}

/* numeric readouts: Gopher with tabular figures instead of a third typeface */
.dim,.metric,.readout,.price,.total,.mono,code,kbd,.brand-sub{
  font-family:var(--font-mono) !important;font-variant-numeric:tabular-nums}

/* ---- panels and strips: flat white, hairline, no warm gradient ---- */
.materials-strip,.materials-strip-mobile,.topbar,.panel,.sheet,.rail,.sidebar,
.tds-panel,.tds-card,.tds-modal,.left-panel,.right-panel{
  background:#ffffff !important;
  background-image:none !important;
  border-color:var(--line) !important;
  box-shadow:none !important;
}

/* ---- swatch tiles: square, hairline, green when chosen.
        the colour chip inside keeps its true timber colour ---- */
.mat-swatch{background:#ffffff !important;border:1px solid var(--line) !important;box-shadow:none !important}
.mat-swatch:hover{border-color:#33554f !important;background:#f6f8f7 !important}
.mat-swatch.is-active,.mat-swatch[aria-pressed="true"],.mat-swatch.active{
  border:1px solid #33554f !important;background:#f2f6f4 !important;box-shadow:inset 0 0 0 1px #33554f !important}
.mat-swatch [class*="name"],.mat-swatch [class*="label"]{color:#2c3639 !important;font-family:var(--font-display)}
.mat-swatch [class*="price"]{color:#25403b !important}

/* ---- buttons ---- */
button,.btn,.cta{font-family:var(--font-display) !important;box-shadow:none !important;text-shadow:none !important}
.btn-primary,.cta,.cta-primary,button.primary,.btn-accent{
  background:#33554f !important;border:1px solid #33554f !important;color:#ffffff !important}
.btn-primary:hover,.cta:hover,.cta-primary:hover,button.primary:hover{
  background:#3f665c !important;border-color:#3f665c !important;transform:none !important}
.btn-ghost,.btn-secondary,.btn-outline{
  background:#ffffff !important;border:1px solid var(--line) !important;color:#2c3639 !important}
.btn-ghost:hover,.btn-secondary:hover,.btn-outline:hover{
  border-color:#33554f !important;background:#f6f8f7 !important}

/* ---- toggles, tabs, segmented controls ---- */
.tab,.seg,.chip,.pill,.step-pill{font-family:var(--font-display)}
.tab.active,.tab[aria-selected="true"],.seg.active,.chip.active,.pill.active,.step-pill.active{
  background:#33554f !important;color:#ffffff !important;border-color:#33554f !important}
.step-pill.active .num,.step-pill.active .n{color:#ffffff !important}

/* ---- inputs and sliders ---- */
input,select,textarea{background:#ffffff !important;border:1px solid var(--line) !important;color:#2c3639 !important;box-shadow:none !important}
input:focus,select:focus,textarea:focus{outline:none;border-color:#33554f !important}
input[type="range"]{accent-color:#33554f}
*:focus-visible{outline:2px solid #33554f !important;outline-offset:2px}

/* ---- the 3D stage sits on white ---- */
canvas{background:#ffffff}
.stage,.viewport,.canvas-wrap,.tds-stage{background:#ffffff !important;background-image:none !important}

/* ---- flatten decorative glow rather than hiding elements ---- */
.glow,.halo,.shine{box-shadow:none !important;filter:none !important;background-image:none !important}


/* ---- header brand lockup ---- */
.topbar .brand{display:flex;align-items:center;gap:0;text-decoration:none}
.topbar .brand img{height:38px;width:auto;display:block}
@media (max-width:620px){.topbar .brand img{height:30px}}