/* Product code references THESE. Dark (ink) is the default theme. */
:root{
  --ts-bg:var(--ts-ink-800);
  --ts-bg-sunken:var(--ts-ink-900);
  --ts-bg-elevated:var(--ts-ink-700);
  --ts-surface-card:var(--ts-ink-700);
  --ts-surface-card-hover:var(--ts-ink-600);
  --ts-surface-overlay:rgba(11,11,11,.72);
  --ts-surface-chrome:rgba(17,17,17,.78);

  --ts-text-primary:var(--ts-paper-100);
  --ts-text-secondary:var(--ts-ash-200);
  --ts-text-muted:var(--ts-ash-300);
  --ts-text-inverse:var(--ts-ink-800);
  --ts-text-on-accent:var(--ts-paper-000);

  --ts-metal:var(--ts-champagne-500);
  --ts-metal-soft:var(--ts-champagne-700);

  --ts-accent:var(--ts-orange-500);
  --ts-accent-hover:#EB7B31;
  --ts-accent-pressed:var(--ts-orange-700);
  --ts-accent-quiet:rgba(224,107,31,.14);

  --ts-border-hairline:rgba(222,218,210,.14);
  --ts-border-strong:rgba(222,218,210,.28);
  --ts-border-metal:rgba(196,169,106,.34);
  --ts-focus-ring:var(--ts-champagne-300);

  --ts-success:var(--ts-green-600); --ts-success-quiet:rgba(63,122,82,.18);
  --ts-warning:var(--ts-amber-600); --ts-warning-quiet:rgba(181,135,31,.18);
  --ts-danger:var(--ts-red-600);   --ts-danger-quiet:rgba(166,58,46,.20);

  /* Component surfaces that must invert with the theme */
  --ts-wash-hover:rgba(222,218,210,.07);
  --ts-wash-metal:rgba(196,169,106,.10);
  --ts-surface-toast:var(--ts-ink-600);
  --ts-surface-control-off:var(--ts-ink-600);
  --ts-solid-hover:var(--ts-paper-000);
  --ts-tooltip-bg:var(--ts-paper-100);
  --ts-tooltip-fg:var(--ts-ink-800);
  --ts-danger-text:var(--ts-orange-300);
  --ts-ots-text:var(--ts-orange-300);
  --ts-skeleton:rgba(222,218,210,.07);
  --ts-skeleton-shine:rgba(222,218,210,.15);

  /* Sub-brands */
  --ts-society-black:var(--ts-ink-800);
  --ts-society-orange:var(--ts-orange-500);
}

[data-theme="paper"]{
  --ts-bg:var(--ts-paper-100);
  --ts-bg-sunken:var(--ts-paper-200);
  --ts-bg-elevated:var(--ts-paper-000);
  --ts-surface-card:var(--ts-paper-000);
  --ts-surface-card-hover:var(--ts-paper-200);
  --ts-surface-overlay:rgba(17,17,17,.44);
  --ts-surface-chrome:rgba(250,248,244,.82);

  --ts-text-primary:var(--ts-ink-800);
  --ts-text-secondary:var(--ts-ink-500);
  --ts-text-muted:var(--ts-ash-400);
  --ts-text-inverse:var(--ts-paper-100);

  --ts-metal:var(--ts-champagne-700);
  --ts-metal-soft:var(--ts-champagne-500);

  --ts-border-hairline:rgba(17,17,17,.12);
  --ts-border-strong:rgba(17,17,17,.24);
  --ts-border-metal:rgba(142,119,66,.40);
  --ts-focus-ring:var(--ts-champagne-700);

  --ts-wash-hover:rgba(17,17,17,.05);
  --ts-wash-metal:rgba(142,119,66,.10);
  --ts-surface-toast:var(--ts-paper-000);
  --ts-surface-control-off:var(--ts-paper-300);
  --ts-solid-hover:var(--ts-ink-500);
  --ts-tooltip-bg:var(--ts-ink-800);
  --ts-tooltip-fg:var(--ts-paper-100);
  --ts-danger-text:var(--ts-orange-700);
  --ts-ots-text:var(--ts-orange-700);
  --ts-skeleton:rgba(17,17,17,.06);
  --ts-skeleton-shine:rgba(17,17,17,.11);

  --ts-shadow-sm:0 1px 2px rgba(17,17,17,.10);
  --ts-shadow-md:0 8px 24px -8px rgba(17,17,17,.18);
  --ts-shadow-lg:0 24px 64px -16px rgba(17,17,17,.24);
  --ts-shadow-sheet:0 -12px 48px -12px rgba(17,17,17,.20);
  --ts-inset-metal:inset 0 0 0 1px rgba(142,119,66,.36);
}