/* HAWACOM shared theme — black & gold, matching www.hawacom.net.
   Every customer page links this file first; page <style> blocks then use these tokens. */
@import url("https://fonts.googleapis.com/css2?family=Graduate&family=Saira+Condensed:wght@500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap");

:root{
  color-scheme:dark;
  --bg:#050505; --panel:#0f0e0c; --panel-2:#16140f; --line:#2a2418; --line-hi:#3a3122;
  --ink:#f3ecd9; --muted:#a59c86;
  --gold:#d9b56a; --gold-hi:#f6e7a1; --gold-lo:#8a5a24;
  --gold-grad:linear-gradient(100deg,#8a5a24 0%,#c99b4f 22%,#f6e7a1 50%,#c99b4f 78%,#8a5a24 100%);
  --on-gold:#140f05;
  --ok:#8fd19b;   --ok-bg:rgba(143,209,155,.12);  --ok-line:rgba(143,209,155,.35);
  --bad:#f19a8e;  --bad-bg:rgba(241,154,142,.12); --bad-line:rgba(241,154,142,.35);
  --warn:#f0c66e; --warn-bg:rgba(240,198,110,.12); --warn-line:rgba(240,198,110,.35);
  --block:"Graduate","Rockwell","Georgia",serif;
  --cond:"Saira Condensed","Oswald","Arial Narrow",sans-serif;
  --body:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  --radius:4px;
  --shadow:0 18px 50px rgba(0,0,0,.45);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  min-height:100vh;
  color:var(--ink);
  font-family:var(--body);
  line-height:1.5;
  background:
    radial-gradient(900px 420px at 50% -10%, rgba(217,181,106,.10), transparent 60%),
    var(--bg);
}
a{color:var(--gold-hi)}
a:hover{color:var(--gold)}
:focus-visible{outline:2px solid var(--gold-hi);outline-offset:3px}
::selection{background:rgba(217,181,106,.35);color:#fff}

h1,h2,h3{font-family:var(--cond);font-weight:700;letter-spacing:.08em;text-transform:uppercase;line-height:1.1}

.gold{background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* gold rule across the top of panels, like the login band on hawacom.net */
.hw-panel{
  position:relative;
  background:linear-gradient(180deg,var(--panel-2),var(--panel));
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.hw-panel::before{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:var(--gold-grad);pointer-events:none;
}

/* form controls */
label{font-family:var(--cond);font-weight:600;letter-spacing:.16em;text-transform:uppercase;font-size:13px;color:var(--gold)}
input,select,textarea{
  font-family:var(--body);
  color:var(--ink);
  background:#0a0907;
  border:1px solid var(--line-hi);
  border-radius:var(--radius);
  font-size:16px;
}
input::placeholder,textarea::placeholder{color:#6f6756}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(217,181,106,.15)}
input[type=file]{background:transparent;border:1px dashed var(--line-hi);padding:10px;width:100%;color:var(--muted)}
input[type=checkbox]{accent-color:var(--gold)}

/* buttons: gold chevron, as on hawacom.net */
.hw-btn,
button{
  font-family:var(--cond);
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  cursor:pointer;
}
.hw-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 20px;
  font-size:15px;
  text-decoration:none;
  color:var(--gold-hi);
  background:transparent;
  border:1px solid var(--gold);
  clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 50%,calc(100% - 10px) 100%,10px 100%,0 50%);
  transition:background .2s,filter .2s;
}
.hw-btn:hover{background:rgba(217,181,106,.12);color:var(--gold-hi)}
.hw-btn.solid{background:var(--gold-grad);color:var(--on-gold);border-color:transparent}
.hw-btn.solid:hover{filter:brightness(1.08);color:var(--on-gold)}

/* brand row used at the top of pages */
.hw-brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.hw-brand img{width:40px;height:40px;object-fit:contain}
.hw-brand b{font-family:var(--block);font-weight:400;font-size:22px;letter-spacing:.04em}

.hw-kicker{font-family:var(--cond);font-weight:600;font-size:13px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold)}

/* tables */
table{border-collapse:collapse}
th{font-family:var(--cond);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}

/* footer */
.hw-footer{margin:22px auto 0;text-align:center;color:var(--muted);font-size:12px;font-family:var(--cond);letter-spacing:.16em;text-transform:uppercase}
.hw-footer .pill{
  display:inline-block;margin-top:8px;padding:7px 14px;
  border:1px solid var(--line-hi);color:var(--gold-hi);
  font-family:var(--block);font-size:15px;letter-spacing:.04em;text-transform:none;
}

/* scrollbars */
*{scrollbar-color:var(--line-hi) transparent}