/*
  Thirio Lab design tokens
  Link this file (plus the Google Fonts link in README.md) in every site.
  All variables use the --tl- prefix. Use the semantic tokens in components;
  the palette tokens exist so the semantic ones have something to point at.
*/

:root {
  /* ---------- Palette ---------- */
  --tl-ink: #15191D;
  --tl-ink-raised: #1E2328;
  --tl-ink-line: #2E343A;
  --tl-slate: #4A5057;
  --tl-steel: #5B6168;
  --tl-fog: #B8BDC2;
  --tl-haze: #8C9298;
  --tl-mist: #ECECE8;
  --tl-line: #E2E2DE;
  --tl-paper: #F7F7F5;
  --tl-white: #FFFFFF;
  --tl-snow: #F2F3F4;

  --tl-sky: #5AAEE1;        /* graphics, marks, dark-mode text */
  --tl-sky-deep: #1F6FA8;   /* text, links, and the mark on light backgrounds */
  --tl-sky-soft: #7CC0EA;   /* links on dark backgrounds */

  /* Sub-brand accents (bright = graphics; deep = text on light) */
  --tl-teal: #5CC2B8;
  --tl-teal-deep: #1D7A72;
  --tl-orange: #E8833A;
  --tl-orange-deep: #B4541A;

  /* ---------- Semantic: light (default) ---------- */
  --tl-bg: var(--tl-paper);
  --tl-surface: var(--tl-white);
  --tl-surface-alt: var(--tl-mist);
  --tl-border: var(--tl-line);
  --tl-text: var(--tl-ink);
  --tl-text-secondary: var(--tl-slate);
  --tl-text-muted: var(--tl-steel);
  --tl-mark: var(--tl-sky-deep);
  --tl-accent: var(--tl-sky);
  --tl-accent-text: var(--tl-sky-deep);
  --tl-link: var(--tl-sky-deep);
  --tl-focus: var(--tl-sky);

  /* ---------- Type ---------- */
  --tl-font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --tl-font-body: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --tl-font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --tl-text-xs: 0.75rem;    /* 12 */
  --tl-text-sm: 0.875rem;   /* 14 */
  --tl-text-base: 1.0625rem;/* 17 */
  --tl-text-lg: 1.25rem;    /* 20 */
  --tl-text-xl: 1.5rem;     /* 24 */
  --tl-text-2xl: 1.875rem;  /* 30 */
  --tl-text-3xl: 2.375rem;  /* 38 */
  --tl-text-4xl: 3rem;      /* 48 */

  --tl-leading-tight: 1.15;
  --tl-leading-snug: 1.35;
  --tl-leading-body: 1.6;
  --tl-tracking-label: 0.08em;

  /* ---------- Space (4px base) ---------- */
  --tl-space-1: 0.25rem;  /* 4 */
  --tl-space-2: 0.5rem;   /* 8 */
  --tl-space-3: 0.75rem;  /* 12 */
  --tl-space-4: 1rem;     /* 16 */
  --tl-space-6: 1.5rem;   /* 24 */
  --tl-space-8: 2rem;     /* 32 */
  --tl-space-12: 3rem;    /* 48 */
  --tl-space-16: 4rem;    /* 64 */
  --tl-space-24: 6rem;    /* 96 */

  /* ---------- Shape and layout ---------- */
  --tl-radius-sm: 6px;
  --tl-radius-md: 10px;
  --tl-radius-lg: 16px;
  --tl-border-width: 1px;
  --tl-measure: 68ch;
  --tl-width-reading: 45rem;  /* 720 */
  --tl-width-page: 70rem;     /* 1120 */
  --tl-gutter: var(--tl-space-4);
}

/* ---------- Semantic: dark ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --tl-bg: var(--tl-ink);
    --tl-surface: var(--tl-ink-raised);
    --tl-surface-alt: var(--tl-ink-raised);
    --tl-border: var(--tl-ink-line);
    --tl-text: var(--tl-snow);
    --tl-text-secondary: var(--tl-fog);
    --tl-text-muted: var(--tl-haze);
    --tl-mark: var(--tl-sky);
    --tl-accent-text: var(--tl-sky-soft);
    --tl-link: var(--tl-sky-soft);
  }
}
:root[data-theme="dark"] {
  --tl-bg: var(--tl-ink);
  --tl-surface: var(--tl-ink-raised);
  --tl-surface-alt: var(--tl-ink-raised);
  --tl-border: var(--tl-ink-line);
  --tl-text: var(--tl-snow);
  --tl-text-secondary: var(--tl-fog);
  --tl-text-muted: var(--tl-haze);
  --tl-mark: var(--tl-sky);
  --tl-accent-text: var(--tl-sky-soft);
  --tl-link: var(--tl-sky-soft);
}

/* ---------- Sub-brands: set data-brand on <html> ---------- */
[data-brand="refresh"] {
  --tl-accent: var(--tl-teal);
  --tl-accent-text: var(--tl-teal-deep);
  --tl-link: var(--tl-teal-deep);
  --tl-focus: var(--tl-teal);
}
[data-brand="coach"] {
  --tl-accent: var(--tl-orange);
  --tl-accent-text: var(--tl-orange-deep);
  --tl-link: var(--tl-orange-deep);
  --tl-focus: var(--tl-orange);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"])[data-brand="refresh"] { --tl-accent-text: var(--tl-teal); --tl-link: var(--tl-teal); }
  :root:not([data-theme="light"])[data-brand="coach"] { --tl-accent-text: var(--tl-orange); --tl-link: var(--tl-orange); }
}
:root[data-theme="dark"][data-brand="refresh"] { --tl-accent-text: var(--tl-teal); --tl-link: var(--tl-teal); }
:root[data-theme="dark"][data-brand="coach"] { --tl-accent-text: var(--tl-orange); --tl-link: var(--tl-orange); }

/* ---------- Optional base styles ---------- */
.tl-base {
  background: var(--tl-bg);
  color: var(--tl-text);
  font-family: var(--tl-font-body);
  font-size: var(--tl-text-base);
  line-height: var(--tl-leading-body);
  -webkit-font-smoothing: antialiased;
}
.tl-base h1, .tl-base h2, .tl-base h3, .tl-base h4 {
  font-family: var(--tl-font-display);
  font-weight: 600;
  line-height: var(--tl-leading-tight);
  letter-spacing: -0.01em;
}
.tl-base a { color: var(--tl-link); text-underline-offset: 0.18em; }
.tl-base :focus-visible { outline: 2px solid var(--tl-focus); outline-offset: 2px; }
.tl-label {
  font-family: var(--tl-font-mono);
  font-size: var(--tl-text-xs);
  letter-spacing: var(--tl-tracking-label);
  text-transform: uppercase;
  color: var(--tl-text-muted);
}