/* =========================================================
   Design tokens, fonts, reset and base typography.

   The palette, type and accent rules come from the Skull house
   identity (assets/skull-asset-lib/assets/README.md): paper and
   porcelain grounds, one ink, and one soft accent per brand —
   periwinkle for Skull Solutions, plum for SkullSploit, rose for
   SkullEdu. The accent lives in surfaces, type and interface,
   never on the mascot's face or line.

   Everything else in styles.css is written against these names.
   ========================================================= */

@font-face {
  font-family: "Cormorant Garamond";
  src: url("/fonts/cormorant-garamond.d80df8ff.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Cormorant Garamond";
  src: url("/fonts/cormorant-garamond-italic.4fb55a7a.woff2") format("woff2");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Karla";
  src: url("/fonts/karla.3b1eb09a.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Karla";
  src: url("/fonts/karla-italic.3de0e923.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("/fonts/ibm-plex-mono-400.08949f72.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("/fonts/ibm-plex-mono-500.01d28544.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* ---------- Grounds ---------- */
  --paper: #f2efeb;
  --porcelain: #fbf9f7;
  --ink: #17141c;
  --night: #1b1721;
  --night-deep: #12101a;

  /* ---------- Text ---------- */
  --text: var(--ink);
  --text-2: #3d3743; /* body copy: 10.0:1 on paper */
  --text-3: #625b68; /* labels and meta: 5.7:1 on paper */
  --on-night: #efe9ef;
  --on-night-2: #bdb4c2; /* 8.8:1 on night */

  /* ---------- Lines ---------- */
  --rule: rgb(23 20 28 / 0.14);
  --rule-mid: rgb(23 20 28 / 0.28);
  --rule-strong: var(--ink);
  --rule-night: rgb(239 233 239 / 0.16);

  /* ---------- Brand accents ----------
     Each has a fill (the identity's 0.70 lightness), a wash for large
     surfaces, and an ink for text that has to pass contrast on paper. */
  --sol: #8f9bd0;
  --sol-wash: #e3e6f3;
  --sol-tint: #eceef7;
  --sol-ink: #46508a; /* 6.6:1 on paper */

  --sploit: #bd94c3;
  --sploit-ink: #d8b9dd; /* on night */
  --sploit-deep: #6f4a75;

  --edu: #d19a8e;
  --edu-wash: #f6e9e5;
  --edu-ink: #8b4d41; /* 5.7:1 on paper */

  /* ---------- Status ----------
     Always paired with a word (see status() in ui.mjs), never colour alone. */
  --ok: #3f7a5a;
  --warn: #a8701d;
  --bad: #b5483d;
  --info: var(--sol-ink);

  /* ---------- Type ---------- */
  --font-display: "Cormorant Garamond", "Cormorant", Garamond, "Times New Roman", serif;
  --font-body: "Karla", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Karla sets small; the display face sets smaller still at the same size,
     because Cormorant's x-height is low. The scale compensates. */
  --step--2: 0.75rem;
  --step--1: 0.875rem;
  --step-0: 1.0625rem;
  --step-1: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  --step-2: clamp(1.5rem, 1.3rem + 0.9vw, 2rem);
  --step-3: clamp(1.875rem, 1.5rem + 1.8vw, 2.875rem);
  --step-4: clamp(2.375rem, 1.7rem + 3.2vw, 4.125rem);
  --step-5: clamp(2.875rem, 1.6rem + 6vw, 6.25rem);

  /* ---------- Space & layout ---------- */
  --container: 76rem;
  --container-narrow: 52rem;
  --gutter: clamp(1rem, 3.5vw, 2rem);
  --section-space: clamp(4rem, 9vw, 7.5rem);
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;

  /* Engineering drawings, not app cards: corners are nearly square. */
  --radius: 2px;
  --radius-pill: 999px;

  /* The button shadow is a printed offset, not a blur. */
  --offset: 3px 3px 0 var(--ink);
  --offset-hover: 5px 5px 0 var(--ink);
  --shadow-soft: 0 1px 0 rgb(23 20 28 / 0.04), 0 18px 40px -28px rgb(23 20 28 / 0.35);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* Dot grid for "engineering paper" surfaces. */
  --grid-dot: radial-gradient(circle at 1px 1px, rgb(23 20 28 / 0.14) 1px, transparent 1.4px);
  --grid-size: 22px 22px;

  /* ---------- Aliases for chat.css ----------
     The assistant's stylesheet came with the SkullSploit foundation and is
     written against these names. */
  --bg: var(--porcelain);
  --bg-inset: var(--paper);
  --fg: var(--ink);
  --muted: var(--text-2);
  --faint: var(--text-3);
  --line: var(--rule-mid);
  --line-soft: var(--rule);
  --line-strong: var(--ink);
  --invert-bg: var(--ink);
  --invert-fg: var(--porcelain);
  --accent-tint: var(--sol-tint);
  --step-000: var(--step--2);
  --step-00: var(--step--1);
  --shadow-md: 0 22px 48px -20px rgb(23 20 28 / 0.35);
  --shadow-sm: 0 6px 18px -10px rgb(23 20 28 / 0.25);
  --font-sans: var(--font-body);
  --skull-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M50 8 C24 8 10 26 10 48 C10 64 20 76 32 76 L34 76 L34 83 C34 88 43 88 43 83 L43 76 L45.5 76 L45.5 86 C45.5 91 54.5 91 54.5 86 L54.5 76 L57 76 L57 83 C57 88 66 88 66 83 L66 76 L68 76 C80 76 90 64 90 48 C90 26 76 8 50 8 Z M44.8 45 a10.8 12.4 0 0 1-21.6 0 10.8 12.4 0 0 1 21.6 0 Z M76.8 45 a10.8 12.4 0 0 1-21.6 0 10.8 12.4 0 0 1 21.6 0 Z'/%3E%3C/svg%3E");

  /* The mascot's teeth, as a repeating edge. Three rounded tabs hanging from a
     bar, the same proportions as the teeth on the glyph. Used as a mask, so the
     colour comes from background-color on whatever paints it. */
  --teeth: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='22' viewBox='0 0 72 22'%3E%3Cpath d='M0 0H72V6H0Z M4 5H20V12A8 8 0 0 1 4 12Z M28 5H44V15A8 8 0 0 1 28 15Z M52 5H68V12A8 8 0 0 1 52 12Z'/%3E%3C/svg%3E");
}

/* ---------- Reset ---------- */

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

body,
h1,
h2,
h3,
h4,
p,
ul,
ol,
figure,
blockquote {
  margin: 0;
}

ul[role="list"],
ol[role="list"] {
  padding: 0;
  list-style: none;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(5.5rem + env(safe-area-inset-top));
}

img,
svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

table {
  border-collapse: collapse;
}

/* ---------- Base ---------- */

body {
  min-height: 100vh;
  background: var(--paper);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.01em;
  text-wrap: balance;
  color: var(--ink);
}

h1 em,
h2 em,
h3 em {
  font-style: italic;
  font-weight: 500;
}

p {
  text-wrap: pretty;
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}

a:hover {
  text-decoration-color: var(--sol);
}

strong {
  font-weight: 700;
}

::selection {
  background: var(--sol-wash);
  color: var(--ink);
}

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 1px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}