/* 00-tokens.css — AIRWAVE design tokens + base reset.
   Console charcoal, quiet flat panels, one amber working accent.
   Red #E5484D is reserved for genuine live state ONLY. */

:root{
  --bg:      #17181C;
  --panel:   #22242B;
  --line:    #2E3138;
  --text:    #E9E7E0;
  --muted:   #9DA0A8;
  --accent:  #F5A524;   /* VU amber — buttons, active nav, focus */
  --live:    #E5484D;   /* ON AIR only */
  --ok:      #46C46E;

  /* secondary hues (badges, log levels — never for live state) */
  --blue:    #8FA0B8;   /* message spots */
  --gold:    #D8B44A;   /* ticker spots */
  --err:     #D46A6A;   /* error text / destructive hover (NOT the on-air red) */
  --warn:    #E0A93F;

  --radius:  6px;

  --font-body:    "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Big Shoulders", "Big Shoulders Display", "Archivo", sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --chrome-bar: 0px;    /* platform chrome top bar height (set when hkc-has-bar) */
}
body.hkc-has-bar{ --chrome-bar: calc(48px + env(safe-area-inset-top)); }

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
html{ scrollbar-color:#3a3d46 var(--bg); }
body{
  background:var(--bg);
  padding-top:var(--chrome-bar);   /* clear the platform chrome bar */
  color:var(--text);
  font-family:var(--font-body);
  font-size:14.5px;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}

h1,h2,h3,h4{ margin:0; font-weight:700; }
p{ margin:0 0 .6em; }
a{ color:var(--accent); text-decoration:none; }
a:hover{ text-decoration:underline; }
code{ font-family:var(--font-mono); font-size:.92em; }

.mono{ font-family:var(--font-mono); }
.muted{ color:var(--muted); }
.hidden{ display:none !important; }

/* section labels — uppercase + letterspacing here ONLY */
.sec-label{
  font-family:var(--font-display);
  font-weight:800;
  font-size:19px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--text);
}
.sub-label{
  font-size:11.5px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
  font-weight:600;
}

/* focus discipline */
:focus{ outline:none; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:3px; }

/* form controls */
input[type=text], input[type=number], input[type=url], textarea, select{
  background:#1B1D22;
  border:1px solid var(--line);
  color:var(--text);
  border-radius:var(--radius);
  padding:8px 10px;
  font-family:var(--font-body);
  font-size:14px;
  max-width:100%;
}
input[type=text]:focus-visible, input[type=number]:focus-visible,
input[type=url]:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:2px solid var(--accent); outline-offset:0;
  border-color:var(--accent);
}
textarea{ resize:vertical; min-height:72px; width:100%; }
input[type=checkbox]{ accent-color:var(--accent); width:16px; height:16px; }
input[type=range]{ accent-color:var(--accent); }
label{ font-size:13px; color:var(--muted); }

/* buttons */
.btn{
  font-family:var(--font-body);
  font-size:13.5px; font-weight:600;
  color:var(--text);
  background:#2A2D35;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:8px 14px;
  cursor:pointer;
  transition:border-color .12s, background .12s;
}
.btn:hover{ border-color:#3E424C; background:#30333C; }
.btn:active{ transform:translateY(1px); }
.btn.primary{ background:var(--accent); border-color:var(--accent); color:#221A05; }
.btn.primary:hover{ background:#FFB53A; }
.btn.small{ padding:4px 9px; font-size:12.5px; }
.btn.danger{ color:var(--err); }
.btn.danger:hover{ border-color:var(--err); }
.btn.ghost{ background:transparent; }
.btn[disabled]{ opacity:.45; cursor:not-allowed; transform:none; }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.001s !important;
    animation-iteration-count:1 !important;
    transition-duration:.001s !important;
  }
}