/* ==========================================================================
   Vignette Dawn — theme tokens, aurora background, base typography.
   Clean-room reconstruction of the old Quartz theme (custom.scss + base.scss).

   Quartz token naming is kept for compatibility with migrated tool scripts
   (e.g. the radio visualizer reads --dark for its line color): the names
   describe each token's ROLE in light mode, not its brightness. Both theme
   modes are dark backgrounds — the default ("light" toggle state) is the COOL
   blue/cyan "Vignette Dawn"; the "dark" toggle state is the WARM orange variant.
   ========================================================================== */

:root {
  /* Surface + text */
  --light: #0e0b14;       /* page base (near-black, faint cool/violet) */
  --dark: #ffffff;        /* bright foreground / strong text + headings */
  --darkgray: #ffffff;    /* body text */
  --gray: #8a93a3;        /* muted text / captions */
  --lightgray: #262a33;   /* borders, code background, dividers */

  /* Accent (cool / default) */
  --secondary: #45c8ff;   /* links, accents */
  --tertiary: #8fdcff;    /* link hover */
  --highlight: rgba(69, 200, 255, 0.12);     /* internal-link / inline highlight */
  --textHighlight: rgba(255, 221, 120, 0.22); /* ==marker== highlight */

  /* Fonts (self-hosted, latin subset) */
  --bodyFont: "Josefin Sans", system-ui, -apple-system, sans-serif;
  --headerFont: "Josefin Sans", system-ui, -apple-system, sans-serif;
  --codeFont: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Aurora stops (cool). Overridden by warm mode below. */
  --aurora-1: #38c6ff;  /* ice-cyan core, arcing across the top edge */
  --aurora-2: #2f6ae8;  /* azure mid-band */
  --aurora-3: #3322a8;  /* deep indigo glow rising from the bottom-left */

  /* Skeuomorphic glow + bevel (follows --secondary so it tracks the mode) */
  --skeu-glow: color-mix(in srgb, var(--secondary) 40%, transparent);
  --skeu-edge-light: rgba(255, 255, 255, 0.05);
  --skeu-edge-dark: rgba(0, 0, 0, 0.55);
}

/* Warm / orange mode: same vignette structure, warm palette. */
:root[saved-theme="dark"] {
  --secondary: #ff8a3d;
  --tertiary: #ffb27a;
  --highlight: rgba(255, 138, 61, 0.12);

  --aurora-1: #ff7a1e;  /* hot orange core */
  --aurora-2: #c81e5e;  /* magenta mid-band */
  --aurora-3: #5a1ea0;  /* violet glow */
}

/* --------------------------------------------------------------------------
   Document
   -------------------------------------------------------------------------- */
* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  overflow-x: hidden;
  width: 100%;
}
@media all and (max-width: 800px) {
  html { scroll-padding-top: 4rem; }
}

body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--light);
  font-family: var(--bodyFont);
  color: var(--darkgray);
  /* Two fixed radial layers form the "dawn": a hot aurora arcing across the
     top edge and a cooler glow rising from the bottom-left corner. The center
     of the viewport stays near the --light base, keeping long text readable. */
  background-image:
    radial-gradient(
      ellipse 95% 55% at 50% -8%,
      color-mix(in srgb, var(--aurora-1) 52%, transparent),
      color-mix(in srgb, var(--aurora-2) 42%, transparent) 34%,
      transparent 72%
    ),
    radial-gradient(
      ellipse 75% 60% at 0% 108%,
      color-mix(in srgb, var(--aurora-3) 50%, transparent),
      transparent 70%
    );
  background-attachment: fixed;
  background-repeat: no-repeat;
}

::selection {
  background: color-mix(in srgb, var(--tertiary) 60%, transparent);
  color: var(--darkgray);
}

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */
p, ul, ol, li, td, tr, a { overflow-wrap: break-word; text-wrap: pretty; }
tbody, li, p { line-height: 1.6rem; }

a {
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s ease;
  color: var(--secondary);
}
a:hover { color: #fff; }

a.internal {
  background-color: var(--highlight);
  padding: 0 0.1rem;
  border-radius: 5px;
  line-height: 1.4rem;
}
a.internal:has(> img) { background-color: transparent; border-radius: 0; padding: 0; }

strong { font-weight: 600; color: var(--dark); }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--headerFont);
  color: var(--dark);
  margin-bottom: 1rem;
  line-height: 1.25;
}
h1 { font-size: 1.75rem; margin-top: 2.25rem; }
h2 { font-size: 1.4rem;  margin-top: 1.9rem; }
h3 { font-size: 1.12rem; margin-top: 1.62rem; }
h4, h5, h6 { font-size: 1rem; margin-top: 1.5rem; }

/* Heading anchor links (revealed on hover) */
h1[id] > a[role="anchor"], h2[id] > a[role="anchor"],
h3[id] > a[role="anchor"], h4[id] > a[role="anchor"],
h5[id] > a[role="anchor"], h6[id] > a[role="anchor"] {
  margin: 0 0.5rem;
  opacity: 0;
  transition: opacity 0.2s ease;
  color: var(--dark);
  background-color: transparent;
}
h1[id]:hover > a[role="anchor"], h2[id]:hover > a[role="anchor"],
h3[id]:hover > a[role="anchor"], h4[id]:hover > a[role="anchor"],
h5[id]:hover > a[role="anchor"], h6[id]:hover > a[role="anchor"] { opacity: 0.6; }

/* Code */
code {
  font-size: 0.9em;
  color: var(--dark);
  font-family: var(--codeFont);
  border-radius: 5px;
  padding: 0.1rem 0.3rem;
  background: var(--lightgray);
}
pre {
  font-family: var(--codeFont);
  padding: 0.6rem 0.8rem;
  border-radius: 6px;
  overflow-x: auto;
  border: 1px solid var(--lightgray);
  background: color-mix(in srgb, var(--lightgray) 55%, transparent);
  box-shadow:
    inset 0 1px 0 var(--skeu-edge-light),
    inset 0 -1px 0 var(--skeu-edge-dark),
    0 2px 6px var(--skeu-edge-dark);
  transition: box-shadow 0.2s ease;
}
pre:hover {
  box-shadow:
    inset 0 1px 0 var(--skeu-edge-light),
    inset 0 -1px 0 var(--skeu-edge-dark),
    0 2px 6px var(--skeu-edge-dark),
    0 0 16px var(--skeu-glow);
}
pre > code { background: none; padding: 0; font-size: 0.85rem; }

/* Blockquotes — skeuomorphic raised card */
blockquote {
  margin: 1rem 0;
  border-left: 3px solid var(--secondary);
  border-radius: 6px;
  padding: 0.5rem 1rem;
  background: color-mix(in srgb, var(--lightgray) 55%, transparent);
  box-shadow:
    inset 0 1px 0 var(--skeu-edge-light),
    inset 0 -1px 0 var(--skeu-edge-dark),
    0 2px 6px var(--skeu-edge-dark),
    -3px 0 12px -4px var(--skeu-glow);
}

/* Tables */
.table-container { overflow-x: auto; }
table {
  margin: 1rem 0;
  border-collapse: collapse;
  border-radius: 6px;
  box-shadow:
    inset 0 1px 0 var(--skeu-edge-light),
    inset 0 -1px 0 var(--skeu-edge-dark),
    0 2px 6px var(--skeu-edge-dark);
}
th { text-align: left; padding: 0.4rem 0.7rem; border-bottom: 2px solid var(--gray); color: var(--dark); }
td { padding: 0.2rem 0.7rem; }
tr { border-bottom: 1px solid var(--lightgray); }
tr:last-child { border-bottom: none; }

/* Media + misc */
img { max-width: 100%; border-radius: 5px; margin: 1rem 0; }
audio, video { width: 100%; border-radius: 5px; }
hr { width: 100%; margin: 2rem auto; height: 1px; border: none; background-color: var(--lightgray); }

input[type="checkbox"] { accent-color: var(--secondary); }

.text-highlight { background-color: var(--textHighlight); padding: 0 0.1rem; border-radius: 5px; }