/* Throughscan design system — tokens
   Single source of truth for color, type, spacing, radius, elevation.
   Editorial-clarity identity: paper-white surfaces, ink type, one ink-blue accent.
   Every token has a dark-mode value so the whole suite flips cleanly. */

:root {
  color-scheme: light dark;   /* native controls (select dropdowns, scrollbars) follow the theme */
  /* surfaces */
  --tl-paper:      #f7f6f3;   /* app/page background */
  --tl-surface:    #ffffff;   /* cards, panels */
  --tl-surface-2:  #fbfaf8;   /* insets, table stripes */
  --tl-overlay:    rgba(20, 20, 18, 0.45);

  /* ink */
  --tl-ink:        #1a1a18;   /* primary text */
  --tl-ink-2:      #56554e;   /* secondary text */
  --tl-ink-3:      #8a897f;   /* tertiary, hints */
  --tl-on-accent:  #ffffff;   /* text on accent fills */

  /* lines */
  --tl-line:       #e7e6e1;
  --tl-line-2:     #d8d7d0;

  /* brand accent (ink blue) */
  --tl-accent:     #16365c;
  --tl-accent-2:   #1f4e7a;
  --tl-accent-wash:#eef3f8;

  /* warm brand secondary (the "real / loss" counterpoint) */
  --tl-warm:       #cf6a3a;
  --tl-warm-soft:  #f6ede6;

  /* semantic */
  --tl-success:    #1d6e4f;  --tl-success-wash:#e7f3ee;
  --tl-warn:       #8a5a12;  --tl-warn-wash:   #fbf0dc;
  --tl-danger:     #9a2d2d;  --tl-danger-wash: #fbeaea;
  --tl-info:       var(--tl-accent); --tl-info-wash: var(--tl-accent-wash);

  /* typography */
  --tl-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --tl-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* spacing scale */
  --tl-1: 4px;  --tl-2: 8px;  --tl-3: 12px; --tl-4: 16px;
  --tl-5: 24px; --tl-6: 32px; --tl-7: 48px; --tl-8: 64px; --tl-9: 96px;

  /* radius */
  --tl-r-sm: 6px; --tl-r-md: 10px; --tl-r-lg: 14px; --tl-r-pill: 999px;

  /* elevation (kept subtle and flat-leaning) */
  --tl-shadow-1: 0 1px 2px rgba(20,20,18,0.04), 0 1px 1px rgba(20,20,18,0.03);
  --tl-shadow-2: 0 4px 16px rgba(20,20,18,0.06), 0 1px 3px rgba(20,20,18,0.04);

  /* layout */
  --tl-maxw: 1080px;
  --tl-maxw-prose: 720px;
  --tl-header-h: 60px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --tl-paper:      #0f1115;
    --tl-surface:    #171a1f;
    --tl-surface-2:  #1c2026;
    --tl-overlay:    rgba(0,0,0,0.6);

    --tl-ink:        #e9e8e3;
    --tl-ink-2:      #a9a89f;
    --tl-ink-3:      #74736b;
    --tl-on-accent:  #08182a;  /* dark text on the light-blue dark-mode accent (buttons stay legible) */

    --tl-line:       #272b31;
    --tl-line-2:     #333840;

    --tl-accent:     #6fa8dc;
    --tl-accent-2:   #8cbce6;
    --tl-accent-wash:#15252f;

    --tl-success:    #5cc99a; --tl-success-wash:#11241c;
    --tl-warn:       #d8a44a; --tl-warn-wash:   #2a2110;
    --tl-danger:     #e07a7a; --tl-danger-wash: #2a1414;

    --tl-shadow-1: 0 1px 2px rgba(0,0,0,0.4);
    --tl-shadow-2: 0 6px 24px rgba(0,0,0,0.5);
  }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}