/*
 * Last Table design tokens. The one place the system's values live; components.css and every page read these
 * variables and never a hex value. Rule of the system: glow means attention. The brass glow marks only what
 * changed, what needs the person, or the one primary action on a page.
 * Every text colour below passes WCAG AA (4.5 to 1) on all three surfaces of its own theme.
 * Fonts are served from this folder (SIL Open Font License 1.1, licence files next to them), so the
 * site's Content-Security-Policy stays 'self' and pages paint without a third-party request.
 */

@font-face {
  font-family: "Fraunces";
  src: url("/last-table/fonts/fraunces.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/last-table/fonts/inter.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/last-table/fonts/jetbrains-mono.woff2") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light dark;

  /* Light theme: the cream menu card under a midnight ink. */
  --lt-surface-1: #f6f0e4;
  --lt-surface-2: #fffaf1;
  --lt-surface-3: #ece3d2;
  --lt-text-1: #141a2b;
  --lt-text-2: #3e4458;
  --lt-text-3: #5b5f6e;
  --lt-line: #d9ccb4;
  --lt-line-strong: #b9a78a;

  /* Glow: the brass accent. glow-ink is the text form, glow-fill the button and chip fill. */
  --lt-glow-ink: #8a5a12;
  --lt-glow-fill: #c08a3a;
  --lt-on-glow: #1a1206;
  --lt-glow-halo: rgba(192, 138, 58, 0.38);
  --lt-glow-wash: rgba(192, 138, 58, 0.14);

  /* Nebula teal: the calm secondary for links and quiet marks. Never used for attention. */
  --lt-teal: #0f6a66;
  --lt-teal-wash: rgba(15, 106, 102, 0.1);

  --lt-success: #1d6b3c;
  --lt-warning: #9a4a12;
  --lt-danger: #a8302a;
  --lt-success-wash: rgba(29, 107, 60, 0.1);
  --lt-warning-wash: rgba(154, 74, 18, 0.1);
  --lt-danger-wash: rgba(168, 48, 42, 0.1);

  --lt-shadow-1: 0 1px 2px rgba(20, 26, 43, 0.08), 0 2px 8px rgba(20, 26, 43, 0.06);
  --lt-shadow-2: 0 4px 12px rgba(20, 26, 43, 0.1), 0 16px 40px rgba(20, 26, 43, 0.12);

  /* Type: one display serif, one interface sans, one mono. Scale ratio 1.2 from a 16px body. */
  --lt-font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --lt-font-ui: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --lt-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --lt-step--1: 0.833rem;
  --lt-step-0: 1rem;
  --lt-step-1: 1.2rem;
  --lt-step-2: 1.44rem;
  --lt-step-3: 1.728rem;
  --lt-step-4: 2.074rem;
  --lt-step-5: 2.488rem;
  --lt-step-6: 2.986rem;
  --lt-leading-tight: 1.15;
  --lt-leading-body: 1.6;
  --lt-measure: 68ch;

  /* Space: a 4px grid. */
  --lt-space-1: 4px;
  --lt-space-2: 8px;
  --lt-space-3: 12px;
  --lt-space-4: 16px;
  --lt-space-5: 24px;
  --lt-space-6: 32px;
  --lt-space-7: 48px;
  --lt-space-8: 64px;
  --lt-space-9: 96px;

  /* Two radii only: cards and panels, then controls (buttons, inputs, chips, code). */
  --lt-radius-card: 12px;
  --lt-radius-control: 8px;

  /* Motion: three durations and one easing. Long only for the hero sky and the completion burst. */
  --lt-dur-fast: 120ms;
  --lt-dur-base: 240ms;
  --lt-dur-slow: 480ms;
  --lt-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  /* Ambient drift of the hero sky only. It is the one motion with no task behind it, so it is very slow. */
  --lt-drift: 240s;

  --lt-page-max: 72rem;
  --lt-gutter: 16px;
}

/* Dark theme: midnight surfaces under the dome. Same roles, same names. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --lt-surface-1: #0b0e17;
    --lt-surface-2: #121725;
    --lt-surface-3: #1a2032;
    --lt-text-1: #f4ecdc;
    --lt-text-2: #cbc1ae;
    --lt-text-3: #a39a89;
    --lt-line: #283048;
    --lt-line-strong: #3b4562;
    --lt-glow-ink: #e3b45f;
    --lt-glow-fill: #e3b45f;
    --lt-on-glow: #1a1206;
    --lt-glow-halo: rgba(227, 180, 95, 0.42);
    --lt-glow-wash: rgba(227, 180, 95, 0.12);
    --lt-teal: #6cc9c3;
    --lt-teal-wash: rgba(108, 201, 195, 0.12);
    --lt-success: #73cf93;
    --lt-warning: #f0a36b;
    --lt-danger: #f2837c;
    --lt-success-wash: rgba(115, 207, 147, 0.12);
    --lt-warning-wash: rgba(240, 163, 107, 0.12);
    --lt-danger-wash: rgba(242, 131, 124, 0.12);
    --lt-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.3);
    --lt-shadow-2: 0 4px 12px rgba(0, 0, 0, 0.45), 0 16px 40px rgba(0, 0, 0, 0.5);
  }
}

/* The same dark set, forced by data-theme="dark" or by a .lt-dome block (the hero sky stays midnight in both themes). */
:root[data-theme="dark"],
.lt-dome {
  color-scheme: dark;
  --lt-surface-1: #0b0e17;
  --lt-surface-2: #121725;
  --lt-surface-3: #1a2032;
  --lt-text-1: #f4ecdc;
  --lt-text-2: #cbc1ae;
  --lt-text-3: #a39a89;
  --lt-line: #283048;
  --lt-line-strong: #3b4562;
  --lt-glow-ink: #e3b45f;
  --lt-glow-fill: #e3b45f;
  --lt-on-glow: #1a1206;
  --lt-glow-halo: rgba(227, 180, 95, 0.42);
  --lt-glow-wash: rgba(227, 180, 95, 0.12);
  --lt-teal: #6cc9c3;
  --lt-teal-wash: rgba(108, 201, 195, 0.12);
  --lt-success: #73cf93;
  --lt-warning: #f0a36b;
  --lt-danger: #f2837c;
  --lt-success-wash: rgba(115, 207, 147, 0.12);
  --lt-warning-wash: rgba(240, 163, 107, 0.12);
  --lt-danger-wash: rgba(242, 131, 124, 0.12);
  --lt-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.3);
  --lt-shadow-2: 0 4px 12px rgba(0, 0, 0, 0.45), 0 16px 40px rgba(0, 0, 0, 0.5);
}

/* Reduced motion: every duration drops to near zero, so transitions still end in the right state. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --lt-dur-fast: 1ms;
    --lt-dur-base: 1ms;
    --lt-dur-slow: 1ms;
  }
}