/* Interlegal Design System — shared token layer v1.0
   Light default + dark opt-in (toggle persists as 'il-theme' in localStorage) */

:root, [data-theme="light"] {
  --bg:         #faf9f5;
  --bg-2:       #ffffff;
  --card:       #ffffff;
  --card-hover: #fdfcf8;
  --border:     rgba(15,23,42,.10);
  --border-strong: rgba(15,23,42,.18);
  --text:       #0f172a;
  --sub:        #334155;
  --muted:      #64748b;
  --accent:     #b45309;
  --accent-2:   #92400e;
  --accent-3:   #134e4a;
  --accent-hover: #92400e;
  --accent-warm:#b45309;
  --green:      #15803d;
  --red:        #b91c1c;
  --ink:        #0f172a;
  --soft:       #f4f1ea;

  /* commodity-claims aliases (page-level compatibility) */
  --surface:    #ffffff;
  --mark:       #f2d76e;
  --hit-bg:     #fff9ec;
  --hit-border: #e6d9b8;
}

[data-theme="dark"] {
  --bg:         #08090d;
  --bg-2:       #0d1017;
  --card:       rgba(22,25,33,.72);
  --card-hover: rgba(28,32,42,.85);
  --border:     rgba(255,255,255,.08);
  --border-strong: rgba(255,255,255,.16);
  --text:       #f4f5f7;
  --sub:        #a0a4ad;
  --muted:      #6b6f78;
  --accent:     #f59e0b;
  --accent-2:   #d97706;
  --accent-3:   #22d3ee;
  --accent-hover:#d97706;
  --accent-warm:#f59e0b;
  --green:      #22c55e;
  --red:        #ef4444;
  --ink:        #f4f5f7;
  --soft:       #1a1d26;

  /* commodity-claims aliases (page-level compatibility) */
  --surface:    rgba(22,25,33,.72);
  --mark:       #fbbf24;
  --hit-bg:     rgba(180,83,9,.12);
  --hit-border: rgba(245,158,11,.28);
}

/* Type scale */
:root {
  --fs-eyebrow: 10.5px;
  --fs-xs:      11.5px;
  --fs-sm:      13px;
  --fs-md:      14px;
  --fs-lg:      16px;
  --fs-xl:      22px;
  --fs-hero:    32px;

  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  18px;

  --shadow-1:   0 1px 2px rgba(15,23,42,.04);
  --shadow-2:   0 4px 12px rgba(15,23,42,.08);
  --shadow-3:   0 12px 32px rgba(180,83,9,.18);

  --ease-out:   cubic-bezier(0.22,0.61,0.36,1);
  --dur-fast:   120ms;
  --dur-med:    200ms;
  --dur-slow:   400ms;
}

/* Focus ring */
*:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Theme toggle button */
.il-theme-toggle {
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--sub);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 5px 8px;
  transition: background var(--dur-fast);
}
.il-theme-toggle:hover { background: var(--card-hover); }