/* theme-01.css — Nordic Frost */

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

:root {
  --color-surface: #f0f4f8;
  --color-surface-alt: #e4ecf4;
  --color-text-primary: #0c1829;
  --color-text-secondary: #5a7189;
  --color-border: #c5d4e4;
  --font-heading: 'Outfit', system-ui, sans-serif;
  --font-body: 'Outfit', system-ui, sans-serif;
  --radius-sm: 0.375rem;
  --radius-md: 0.625rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --shadow-sm: 0 2px 8px rgb(12 40 80 / 0.06);
  --shadow-md: 0 8px 24px rgb(12 40 80 / 0.08), 0 2px 6px rgb(12 40 80 / 0.04);
  --shadow-lg: 0 20px 48px rgb(12 40 80 / 0.12), 0 4px 12px rgb(12 40 80 / 0.06);
  --navbar-bg: rgba(240, 244, 248, 0.88);
  --navbar-border: rgba(180, 200, 220, 0.55);
}

body {
  font-family: var(--font-body);
  background-color: var(--color-surface);
  color: var(--color-text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-image: radial-gradient(ellipse 120% 80% at 50% -20%, rgb(180 210 240 / 0.35), transparent);
}

nav {
  background: var(--navbar-bg);
  border-bottom: 1px solid var(--navbar-border);
  backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-text-primary);
  letter-spacing: -0.04em;
}

h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 700; }
h2 { font-size: clamp(1.35rem, 3vw, 1.875rem); }
h3 { font-size: clamp(1.15rem, 2.5vw, 1.5rem); }
h4 { font-size: 1.125rem; }
h5 { font-size: 1rem; font-weight: 600; }
h6 { font-size: 0.875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-secondary); }

.card, [class*="card"] {
  background: rgb(255 255 255 / 0.65); border: 1px solid rgb(200 220 240 / 0.7); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-radius: var(--radius-lg);
  transition: box-shadow 0.2s ease, transform 0.2s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.card:hover, [class*="card"]:hover {
  box-shadow: var(--shadow-md); transform: translateY(-2px);
}

a {
  color: inherit;
  transition: color 0.15s ease, opacity 0.15s ease, background 0.15s ease, text-shadow 0.15s ease;
  text-underline-offset: 4px;
}

a:hover {
  color: var(--color-primary); opacity: 1;
}

table { border-collapse: collapse; width: 100%; font-size: 0.9375rem; }
th {
  font-weight: 600;
  background: #dce8f4;
  text-align: left;
}
tr:nth-child(even) td { background: #eef4fa; }
td, th {
  border: 1px solid var(--color-border);
  padding: 0.65rem 0.9rem;
  vertical-align: top;
}

hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 2rem 0;
  opacity: 0.85;
}