/* themes/_dark.css
   Dark theme: designed for readability while keeping the paper aesthetic.
*/

[data-theme="dark"] {
  color-scheme: dark;

  /* Surface colors. */
  --color-surface-primary: var(--gray-900);
  --color-surface-secondary: var(--gray-800);
  --color-surface-tertiary: var(--gray-700);
  --color-surface-elevated: var(--gray-800);
  --color-surface-sunken: var(--gray-950);
  --color-surface-overlay: rgba(var(--shadow-rgb), var(--opacity-65));
  --color-surface-inverse: var(--white);

  /* Text colors. */
  --color-text-primary: var(--gray-50);
  --color-text-secondary: var(--gray-200);
  --color-text-tertiary: var(--gray-400);
  --color-text-inverse: var(--gray-950);
  --color-text-disabled: var(--gray-600);
  --color-text-link: var(--cyan-300);
  --color-text-link-hover: var(--cyan-200);

  /* Border colors. */
  --color-border-strong: var(--gray-50);
  --color-border-control: var(--gray-500);
  --color-border-default: var(--gray-600);
  --color-border-light: var(--gray-700);
  --color-border-focus: var(--cyan-400);
  --color-border-error: var(--red-400);

  /* Interactive colors. */
  --color-interactive-primary: var(--gray-50);
  --color-interactive-primary-hover: var(--gray-200);
  --color-interactive-primary-active: var(--gray-100);
  --color-interactive-secondary: var(--gray-800);
  --color-interactive-secondary-hover: var(--gray-700);
  --color-interactive-secondary-active: var(--gray-600);

  /* Accent colors. */
  --color-accent: var(--cyan-400);
  --color-accent-strong: var(--cyan-300);
  --color-accent-soft: color-mix(in srgb, var(--color-accent) 12%, var(--color-surface-elevated));
  --color-accent-text: var(--cyan-200);

  /* Status colors. */
  --color-success: var(--green-400);
  --color-success-soft: color-mix(in srgb, var(--color-success) 12%, var(--color-surface-elevated));
  --color-success-text: var(--green-300);
  --color-warning: var(--yellow-400);
  --color-warning-soft: color-mix(in srgb, var(--color-warning) 12%, var(--color-surface-elevated));
  --color-warning-text: var(--yellow-300);
  --color-danger: var(--red-400);
  --color-danger-soft: color-mix(in srgb, var(--color-danger) 12%, var(--color-surface-elevated));
  --color-danger-text: var(--red-300);
  --color-danger-dark: var(--red-600);
  --color-info: var(--blue-400);
  --color-info-soft: color-mix(in srgb, var(--color-info) 12%, var(--color-surface-elevated));
  --color-info-text: var(--blue-300);
}