/* Unsloth-inspired tokens (extracted from unsloth.ai, 2026-10-13).
   Brand palette --u-green / --u-ink / --u-paper + dark companions.
   Semantic roles (--u-fg, --u-accent-*, …) switch with data-theme. */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

:root {
  /* Brand (light) — from Unsloth :root */
  --u-green: #14b789;
  --u-green-pale: #effbf7;
  --u-green-soft: #dff8ef;
  --u-green-wash: #f6fcf9;
  --u-ink: #171717;
  --u-muted: #646864;
  --u-paper: #fafaf8;
  --u-soft: #f1f2f0;
  --u-white: #ffffff;

  /* Brand (dark raw) — from Unsloth --u-dark-* */
  --u-dark-accent: #6ce0b8;
  --u-dark-accent-strong: #43d3a3;
  --u-dark-accent-surface: #383838;
  --u-dark-canvas: #181818;
  --u-dark-muted: #b4b4b4;
  --u-dark-subtle: #8e8e8e;
  --u-dark-surface-1: #1f1f1f;
  --u-dark-surface-2: #333333;
  --u-dark-surface-3: #383838;
  --u-dark-surface-4: #484848;
  --u-dark-text: #f5f5f5;

  /* Type — Inter (Hellix fallback on unsloth.ai; sharp, not rounded-display) */
  --u-font-sans: Inter, Arial, sans-serif;
  --u-font-display: "Schibsted Grotesk", Inter, Arial, sans-serif;
  --u-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* Radius / shadow / space (Unsloth-leaning) */
  --u-radius-full: 9999px;
  --u-radius-hero: 48px;
  --u-radius-large: 16px;
  --u-radius-medium: 12px;
  --u-radius-small: 6px;
  --u-shadow-resting-xsmall: 0 1px 2px rgba(17, 20, 17, 0.06);
  --u-shadow-resting-small: 0 1px 2px rgba(17, 20, 17, 0.04), 0 0 0 1px rgba(17, 20, 17, 0.04);
  --u-shadow-resting-medium: 0 4px 8px rgba(17, 20, 17, 0.12);
  --u-shadow-floating-small: 0 12px 30px rgba(17, 20, 17, 0.1);
  --u-space-1: 2px;
  --u-space-2: 4px;
  --u-space-3: 6px;
  --u-space-4: 8px;
  --u-space-5: 12px;
  --u-space-6: 16px;
  --u-space-7: 20px;
  --u-space-8: 24px;
  --u-space-9: 28px;
  --u-space-10: 32px;
  --u-space-11: 36px;
  --u-space-12: 40px;
  --u-space-13: 44px;
  --u-space-14: 48px;
  --u-space-15: 64px;
  --u-space-16: 80px;
  --u-space-17: 96px;
  --u-space-18: 112px;
  --u-space-19: 128px;

  /* Motion (docs/05) */
  --dur-1: 120ms;
  --dur-2: 240ms;
  --dur-3: 480ms;
  --dur-4: 1200ms;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* Hero wash (computed from Unsloth landing) */
  --u-hero-wash: radial-gradient(circle at 8% 12%, rgba(20, 183, 137, 0.18), transparent 35%),
    radial-gradient(circle at 92% 82%, rgba(20, 183, 137, 0.14), transparent 34%),
    linear-gradient(135deg, #ecfaf5 0%, #fbfdfc 50%, #e4f8f0 100%);

  /* —— Light semantic roles —— */
  --u-fg: var(--u-ink);
  --u-fg-muted: var(--u-muted);
  --u-fg-subtle: #8e948e;
  --u-fg-on: var(--u-white);
  --u-bg: var(--u-white);
  --u-bg-muted: var(--u-paper);
  --u-bg-soft: var(--u-soft);
  --u-bg-inset: var(--u-green-wash);
  --u-bg-emphasis: var(--u-ink);
  --u-border: #e2e5e1;
  --u-border-strong: #9aa19a;
  --u-border-muted: #eceeea;

  --u-accent-fg: #0f8f6c;
  --u-accent-emphasis: var(--u-green);
  --u-accent-muted: var(--u-green-pale);
  --u-accent-border: #14b78966;

  --u-primary-fg: #0f8f6c;
  --u-primary-emphasis: var(--u-green);
  --u-primary-muted: var(--u-green-soft);
  --u-primary-border: #14b78966;

  --u-success-fg: #0f8f6c;
  --u-success-emphasis: var(--u-green);
  --u-success-muted: var(--u-green-soft);
  --u-success-border: #14b78966;

  --u-danger-fg: #c4232e;
  --u-danger-emphasis: #cf222e;
  --u-danger-muted: #ffebe9;
  --u-danger-border: #ff818266;

  --u-attention-fg: #9a6700;
  --u-attention-emphasis: #9a6700;
  --u-attention-muted: #fff8c5;
  --u-attention-border: #d4a72c66;

  --u-done-fg: #8250df;
  --u-done-muted: #fbefff;
  --u-done-border: #c297ff66;

  --u-severe-fg: #bc4c00;
  --u-severe-muted: #fff1e5;

  --u-hl: var(--u-green);
  --u-hl-muted: #14b78933;
  --u-hl-fg: #0f8f6c;
}

html[data-theme="dark"] {
  --u-fg: var(--u-dark-text);
  --u-fg-muted: var(--u-dark-muted);
  --u-fg-subtle: var(--u-dark-subtle);
  --u-fg-on: #0a0a0a;
  --u-bg: var(--u-dark-canvas);
  --u-bg-muted: var(--u-dark-surface-1);
  --u-bg-soft: var(--u-dark-surface-2);
  --u-bg-inset: var(--u-dark-surface-1);
  --u-bg-emphasis: var(--u-dark-surface-4);
  --u-border: #3a3a3a;
  --u-border-strong: #6a6a6a;
  --u-border-muted: #2a2a2a;

  --u-accent-fg: var(--u-dark-accent);
  --u-accent-emphasis: var(--u-dark-accent-strong);
  --u-accent-muted: var(--u-dark-accent-surface);
  --u-accent-border: #6ce0b866;

  --u-primary-fg: var(--u-dark-accent);
  --u-primary-emphasis: var(--u-dark-accent-strong);
  --u-primary-muted: var(--u-dark-accent-surface);
  --u-primary-border: #6ce0b866;

  --u-success-fg: var(--u-dark-accent);
  --u-success-emphasis: var(--u-dark-accent-strong);
  --u-success-muted: var(--u-dark-accent-surface);
  --u-success-border: #6ce0b866;

  --u-danger-fg: #ff8b8e;
  --u-danger-emphasis: #ff6b6f;
  --u-danger-muted: #3d1f21;
  --u-danger-border: #ff818266;

  --u-attention-fg: #e3b341;
  --u-attention-emphasis: #e3b341;
  --u-attention-muted: #3d3418;
  --u-attention-border: #d4a72c66;

  --u-done-fg: #c9a8ff;
  --u-done-muted: #2e2440;
  --u-done-border: #c297ff66;

  --u-severe-fg: #ff9a5c;
  --u-severe-muted: #3d2818;

  --u-hl: var(--u-dark-accent);
  --u-hl-muted: #6ce0b833;
  --u-hl-fg: var(--u-dark-accent);

  --u-hero-wash: radial-gradient(circle at 8% 12%, rgba(108, 224, 184, 0.14), transparent 35%),
    radial-gradient(circle at 92% 82%, rgba(67, 211, 163, 0.1), transparent 34%),
    linear-gradient(135deg, #1a2420 0%, #181818 50%, #1c2220 100%);

  --u-shadow-resting-xsmall: 0 1px 2px rgba(0, 0, 0, 0.35);
  --u-shadow-resting-small: 0 1px 2px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.04);
  --u-shadow-resting-medium: 0 4px 12px rgba(0, 0, 0, 0.45);
  --u-shadow-floating-small: 0 12px 30px rgba(0, 0, 0, 0.45);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-1: 0ms;
    --dur-2: 0ms;
    --dur-3: 0ms;
    --dur-4: 0ms;
  }
}