/* eLabN design tokens — single source of truth.
 * Derived from the Aug 2026 concept boards (see docs/brand/concept-notes.md);
 * board 4 is canonical. Contrast ratios verified with WCAG relative luminance:
 * every -text token passes 4.5:1 on its intended ground; bare accent hues are
 * decorative/large-UI only (>=3:1 where noted). Dark theme values are chosen,
 * not auto-inverted.
 *
 * Themes: light values live on :root; dark values apply under
 * prefers-color-scheme:dark (guarded so an explicit data-theme="light" wins)
 * and under [data-theme="dark"] for explicit toggles.
 */

:root {
  color-scheme: light;

  /* brand hues (identity — fixed across themes) */
  --el-aqua: #22d3c5;        /* decorative only: 1.9:1 on white */
  --el-violet: #7c5cff;      /* large text / UI on white: 4.35:1 */
  --el-navy: #0b0f1a;

  /* accessible accent text */
  --el-aqua-text: #0e7c74;   /* 5.06:1 on white */
  --el-violet-text: #5b3dd6; /* 6.81:1 on white */
  --el-link: var(--el-aqua-text);

  /* gradient signature: logo, hero accents, focus moments ONLY */
  --el-gradient: linear-gradient(135deg, #22d3c5, #7c5cff);

  /* surfaces */
  --el-canvas: #fafbfd;
  --el-surface: #ffffff;
  --el-surface-2: #f1f4f9;

  /* ink hierarchy */
  --el-ink: #0b0f1a;         /* 18.5:1 on canvas */
  --el-ink-2: #46566b;       /* 7.5:1 on white */
  --el-ink-3: #64748b;       /* 4.8:1 on white */

  /* lines & depth */
  --el-hairline: rgba(11, 15, 26, 0.10);
  --el-hairline-soft: rgba(11, 15, 26, 0.06);
  --el-shadow: 0 1px 2px rgba(11, 15, 26, 0.05), 0 14px 36px -18px rgba(11, 15, 26, 0.18);

  /* washes / tints (board 4 accent tints) */
  --el-tint-aqua: #b7f6ea;
  --el-tint-sky: #c6f0ff;
  --el-tint-lilac: #e3d8ff;
  --el-tint-pink: #ffd6f0;
  --el-wash-aqua: rgba(34, 211, 197, 0.12);
  --el-wash-violet: rgba(124, 92, 255, 0.10);

  /* semantic (icon+label always; -text variants pass 4.5:1 on white) */
  --el-good: #22c55e;        --el-good-text: #15803d;
  --el-warn: #f59e0b;        --el-warn-text: #92600a;
  --el-danger: #ef4444;      --el-danger-text: #dc2626;
  --el-info: #3b82f6;        --el-info-text: #1d4ed8;

  /* focus ring: violet on light, aqua on dark */
  --el-focus-ring: #7c5cff;

  /* type */
  --el-font-display: "Sora", system-ui, -apple-system, "Segoe UI", sans-serif;
  --el-font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --el-text-display: 600 clamp(2.5rem, 5.5vw, 3.75rem)/1.08 var(--el-font-display);
  --el-text-h1: 600 1.75rem/1.28 var(--el-font-display);
  --el-text-h2: 600 1.25rem/1.4 var(--el-font-display);
  --el-text-h3: 600 1rem/1.5 var(--el-font-display);
  --el-text-body: 400 1rem/1.55 var(--el-font-body);
  --el-text-small: 400 0.875rem/1.5 var(--el-font-body);
  --el-text-caption: 500 0.75rem/1.4 var(--el-font-body);

  /* shape & space (4px grid) */
  --el-radius-sm: 6px;
  --el-radius-md: 10px;
  --el-radius-lg: 14px;
  --el-radius-xl: 20px;
  --el-space-1: 4px; --el-space-2: 8px; --el-space-3: 12px;
  --el-space-4: 16px; --el-space-6: 24px; --el-space-8: 32px;
  --el-space-12: 48px; --el-space-16: 64px; --el-space-24: 96px;

  /* motion (opacity/transform only; honor prefers-reduced-motion) */
  --el-dur-fast: 120ms;
  --el-dur-base: 200ms;
  --el-dur-gentle: 320ms;
  --el-ease: cubic-bezier(0.2, 0, 0, 1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --el-aqua: #3de8da;          /* 11.6:1 on dark surface */
    --el-violet: #a78bfa;        /* 6.5:1 on dark surface */
    --el-aqua-text: #3de8da;
    --el-violet-text: #a78bfa;
    --el-link: #3de8da;
    --el-gradient: linear-gradient(135deg, #3de8da, #a78bfa);
    --el-canvas: #0b0f1a;
    --el-surface: #121826;
    --el-surface-2: #182134;
    --el-ink: #edf1f7;
    --el-ink-2: #a9b4c4;
    --el-ink-3: #79879b;
    --el-hairline: rgba(237, 241, 247, 0.12);
    --el-hairline-soft: rgba(237, 241, 247, 0.06);
    --el-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 14px 36px -18px rgba(0, 0, 0, 0.55);
    --el-wash-aqua: rgba(61, 232, 218, 0.10);
    --el-wash-violet: rgba(167, 139, 250, 0.12);
    --el-good-text: #4ade80;
    --el-warn-text: #fbbf24;
    --el-danger: #f87171;      --el-danger-text: #f87171;
    --el-info-text: #60a5fa;
    --el-focus-ring: #3de8da;
  }
}

[data-theme="dark"] {
  color-scheme: dark;
  --el-aqua: #3de8da;
  --el-violet: #a78bfa;
  --el-aqua-text: #3de8da;
  --el-violet-text: #a78bfa;
  --el-link: #3de8da;
  --el-gradient: linear-gradient(135deg, #3de8da, #a78bfa);
  --el-canvas: #0b0f1a;
  --el-surface: #121826;
  --el-surface-2: #182134;
  --el-ink: #edf1f7;
  --el-ink-2: #a9b4c4;
  --el-ink-3: #79879b;
  --el-hairline: rgba(237, 241, 247, 0.12);
  --el-hairline-soft: rgba(237, 241, 247, 0.06);
  --el-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 14px 36px -18px rgba(0, 0, 0, 0.55);
  --el-wash-aqua: rgba(61, 232, 218, 0.10);
  --el-wash-violet: rgba(167, 139, 250, 0.12);
  --el-good-text: #4ade80;
  --el-warn-text: #fbbf24;
  --el-danger: #f87171;      --el-danger-text: #f87171;
  --el-info-text: #60a5fa;
  --el-focus-ring: #3de8da;
}