@import url("./flexoki.css");

html {
  color-scheme: dark light;
  font-size: 100%;
}

/* =========================
   THEME — DARK (default)
   ========================= */
:root {
--bg: var(--flexoki-900);
--bg-2: var(--flexoki-850);

--ui: var(--flexoki-800);
--ui-2: var(--flexoki-700);
--ui-3: var(--flexoki-750);

--tx: var(--flexoki-50);
--tx-2: var(--flexoki-400);
--tx-3: var(--flexoki-600);

--color-primary: var(--flexoki-blue-300);
--color-primary-hover: var(--flexoki-blue-200);
--color-success: var(--flexoki-green-300);
--color-warning: var(--flexoki-yellow-300);
--color-danger: var(--flexoki-red-300);
--color-info: var(--flexoki-cyan-300);
}

/* =========================
   THEME — LIGHT
   ========================= */

@media (prefers-color-scheme: light) {
	:root {
  /* Backgrounds / UI surfaces */
  --bg: var(--flexoki-paper);         /* main background (paper tone) */
  --bg-2: var(--flexoki-50);          /* secondary background / surface */

  /* UI borders / surfaces / ui elements */
  --ui: var(--flexoki-200);
  --ui-2: var(--flexoki-100);
  --ui-3: var(--flexoki-150);

  /* Text tones */
  --tx: var(--flexoki-black);         /* main text (ink) */
  --tx-2: var(--flexoki-600);         /* muted / secondary text */
  --tx-3: var(--flexoki-300);         /* faint / tertiary / subtle text */

  /* Accent / semantic colors (buttons, links, alerts…) */
  --color-primary: var(--flexoki-blue-600);
  --color-primary-hover: var(--flexoki-blue-700);
  --color-success: var(--flexoki-green-600);
  --color-warning: var(--flexoki-yellow-600);
  --color-danger: var(--flexoki-red-600);
  --color-info: var(--flexoki-cyan-600);
	}
}

/* =========================
   GLOBALS
   ========================= */


body{
    margin:0.5em auto;
	background: var(--bg);
	color: var(--tx);
	font-family: 'Iowan Old Style', 'Palatino Linotype', 'URW Palladio L', P052, serif;
    max-width:65ch;
	padding: 0.5em 1em 0.5em;
}

/* =========================
   TYPOGRAPHY
   ========================= */

h1,
h2 {
  color: var(--tx);
  line-height: 1.25;
}

h1 {
  font-size: clamp(2rem, 2vw, 2.5rem);
  letter-spacing: -0.02em;
}

h2 {
  font-size: clamp(1.5rem, 1.5vw, 1.8rem);
  color: var(--tx-2);
}

p {
  font-size: 1.3em;
  line-height: 1.6;
  max-width:65ch;
  color: var(--tx);
}


a:link {
	color: var(--color-primary);
	background-color: transparent;
	text-decoration: underline;
}

a:hover {
	color: var(--color-primary-hover);
	background-color: transparent;
	text-decoration: underline;
}

a:active {
	color: var(--color-primary-hover);
	background-color: transparent;
	text-decoration: underline;
}

a:visited {
	color: var(--tx-2);
	background-color: transparent;
	text-decoration: underline;
}

ul {
  margin: 0 0 1.5em 0;
  padding-left: 1.4em; /* aligns bullet + text */
  list-style-type: disc;
  list-style-position: outside;
}

li {
  margin: 0 0 0.25em 0;
  color: var(--tx);
  font-size: 1.3em;
  max-width:60ch;
  line-height: 1.2;
}

/* Wrapped lines */
li > * {
  margin-top: 0;
  margin-bottom: 0;
}

/* Softer bullets */
li::marker {
  color: var(--tx-2);
  font-size: 0.85em;
}

/* Nested lists */
li ul {
  margin: 0.5em 0 0.8em 0;
}

li ul li::marker {
  color: var(--tx-3);
}