@import "style_sections.css";
@import "style_top_bar.css";
@import "style_navigation.css";

:root {
  /* Brand green + near-black, sampled from the 5K-IoT logo */
  --color-primary: #1a7a4c;
  --color-primary-light: #3fae74;
  --color-primary-dark: #10502f;
  --color-accent: #11221c;
  --color-bg: #f4faf7;
  --color-surface: #ffffff;
  --color-text: #202524;
  --color-muted: #647069;

  --font-heading: "Poppins", "Segoe UI", Helvetica, Arial, sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --radius: 12px;
  --shadow-soft: 0 4px 16px rgba(17, 34, 28, 0.14);
}

html {
  ;
}

body {
  overflow-y: hidden;
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
}

header {
  position: relative;
  top: 0px;
  width: calc(100% - 20px);
  height: 56px;
  margin: 10px;
  border-color: var(--color-primary);
  box-shadow: var(--shadow-soft);
  background-color: var(--color-surface);
  border-radius: var(--radius);
}

main {
  overflow-y: scroll;
  position: relative;
  left: 10px;
  width: calc(100% - 20px);
  height: calc(100vh - (56px + (10px * 2)) - (40px + (2px) + (10px * 2)));
}

footer {
  position: relative;
  bottom: 0px;
  width: calc(100% - 20px);
  height: 30px;
  padding: 2px 0px 0px;
  margin: 10px;
  font-size: 12px;
  text-align: center;
  color: var(--color-primary);
  border-color: var(--color-primary);
  box-shadow: var(--shadow-soft);
  background-color: var(--color-surface);
  border-radius: var(--radius);
}

.footer a:link, .footer a:visited, .footer a:hover, .footer a:active {
  color: var(--color-primary);
}

.hs-before {padding-left: 5px;}
.hs-before {padding-right: 5px;}