@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Rajdhani:wght@500;600;700&family=IBM+Plex+Mono:wght@400;500&family=Bangers&display=swap');

/* ── Every Layout modular scale ── */
:root {
  --ratio: 1.5;
  --s-5: calc(var(--s-4) / var(--ratio));
  --s-4: calc(var(--s-3) / var(--ratio));
  --s-3: calc(var(--s-2) / var(--ratio));
  --s-2: calc(var(--s-1) / var(--ratio));
  --s-1: calc(var(--s0)  / var(--ratio));
  --s0:  1.125rem;
  --s1:  calc(var(--s0) * var(--ratio));
  --s2:  calc(var(--s1) * var(--ratio));
  --s3:  calc(var(--s2) * var(--ratio));
  --s4:  calc(var(--s3) * var(--ratio));
  --s5:  calc(var(--s4) * var(--ratio));

  /* Center component max-width */
  --measure: 120ch;

  /* ── Default (dark) theme ── */
  --bg:          #0a1620;
  --bg-deep:     #060f17;
  --panel:       #0e1f2c;
  --panel2:      #152838;
  --accent:      #2978a0;
  --accent-hi:   #3db0e0;
  --accent-rgb:  41, 120, 160;
  --fg:          #aecde0;
  --fg-bright:   #e8f4fd;
  --fg-mid:      #7aabcb;
  --fg-muted:    #4a7a99;
  --border:      rgba(41, 120, 160, 0.25);
  --radius:      4px;
}

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

body {
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
  font-size: var(--s0);
  line-height: var(--ratio);
  color: var(--fg);
  background: var(--bg);
  margin: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Rajdhani', system-ui, sans-serif;
  font-weight: 600;
  color: var(--fg-bright);
  line-height: 1.2;
}

a {
  color: var(--accent-hi);
  text-decoration: none;
}
a:hover { text-decoration: underline; }

code, pre, .mono {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.875em;
}

small { color: var(--fg-mid); font-size: 0.8em; }
em    { color: var(--fg-mid); }
strong { color: var(--fg-bright); }

/* ── Cards / articles ── */
article {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--s-1) var(--s0);
}

article:hover { border-color: rgba(var(--accent-rgb), 0.5); }

/* ── Links that look like cards ── */
a > article {
  display: block;
  color: var(--fg);
  transition: border-color 0.15s;
}
a:has(> article):hover { text-decoration: none; }
a:hover > article { border-color: var(--accent-hi); }

/* ── Light theme ── */
html[data-theme="light"] {
  --bg:         #f4f7fa;
  --bg-deep:    #e6ecf2;
  --panel:      #ffffff;
  --panel2:     #edf1f6;
  --accent:     #2978a0;
  --accent-hi:  #1a6090;
  --accent-rgb: 41, 120, 160;
  --fg:         #1e3a4a;
  --fg-bright:  #0d1f2d;
  --fg-mid:     #3a6a85;
  --fg-muted:   #7a9aaa;
  --border:     rgba(41, 120, 160, 0.2);
}