/* Style Guide: iot-concepts */

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');

/* ── Variables ── */
:root {
  --font-family: 'Roboto', sans-serif;
  --font-size: 17px;
  --line-height: 1.5;
  --letter-spacing: -0.02em;
  --text-color: #334155;
  --bg-color: #ffffff;
  --nav-bg: #ffffff;
  --nav-text: #666666;
  --nav-link: #666666;
  --nav-link-hover: #999999;
  --table-header-bg: #cccccc;
  --table-header-text: #333333;
  --table-row-odd: #ffffff;
  --table-row-even: #f8fafc;
  --table-border: #e2e8f0;
}

/* ── Base ── */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--font-family);
  font-size: var(--font-size);
  line-height: var(--line-height);
  letter-spacing: var(--letter-spacing);
  color: var(--text-color);
  background-color: var(--bg-color);
  margin: 0;
  padding: 0;
}

/* ── Headings ── */
h1 { font-size: 40px; }
h2 { font-size: 32px; }
h3 { font-size: 24px; }
h4 { font-size: 20px; }
h5 { font-size: 18px; }
h6 { font-size: 16px; }
h1, h2, h3, h4, h5, h6 { margin-top: 0; margin-bottom: 0.5em; font-weight: 700; line-height: 1.2; }

/* ── Body copy ── */
p { margin-top: 0; margin-bottom: 14px; }
ul, ol { margin-top: 0; margin-bottom: 14px; padding-left: 1.5em; }
li { margin-bottom: 4px; }

/* ── Navigation ── */
.site-nav {
  background-color: var(--nav-bg);
  color: var(--nav-text);
  display: flex;
  align-items: center;
  padding: 14px 24px;
  gap: 24px;
}

.site-nav .logo {
  width: 160px;
  height: auto;
  display: block;
  flex-shrink: 0;
}

.site-nav .logo-text {
  color: var(--nav-text);
  font-size: 20px;
  font-weight: 700;
  text-decoration: none;
  flex-shrink: 0;
}

.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; }
.site-nav ul li a { color: var(--nav-link); text-decoration: none; padding: 6px 12px; border-radius: 4px; transition: color 0.15s; }
.site-nav ul li a:hover { color: var(--nav-link-hover); }

/* ── Tables ── */
table { width: 100%; border-collapse: collapse; margin-bottom: 1.5em; }
th, td { padding: 12px; text-align: left; border: 1px dotted var(--table-border); }
thead th { background-color: var(--table-header-bg); color: var(--table-header-text); font-weight: 600; }
tbody tr:nth-child(odd)  { background-color: var(--table-row-odd); }
tbody tr:nth-child(even) { background-color: var(--table-row-even); }

/* ── Content wrapper ── */
.content { max-width: 1200px; margin: 0 auto; padding: 40px 28px; }