/*
 * The app's palette, light and dark (FeatherCSS variables). Its own file so the terminal page, which
 * does not load the app's stylesheets, takes its colours from the same place.
 */
/*!
 * Variables
 */
:root {
  --font-family: -apple-system, system-ui, "Segoe UI", Roboto, "Helvetica Neue",
    Helvetica, Arial, sans-serif;
  --transition-speed: 0.15s;
  --disabled-opacity: 0.75;
  --color-primary: hsl(190, 97%, 30%);
  --color-primary-focus: hsl(190, 97%, 38%);
  --color-highlight: hsl(190, 97%, 85%);
  --color-success: hsl(130, 66%, 32%);
  --color-error: hsl(0, 66%, 47%);
  --color-credit: hsl(280, 60%, 48%);
  --color-link: hsl(210, 66%, 47%);
  --color-link-focus: hsl(210, 66%, 52%);
  --color-background: hsl(0, 0%, 100%);
  --color-gray-0: hsl(0, 0%, 0%);
  --color-gray-1: hsl(0, 0%, 15%);
  --color-gray-2: hsl(0, 0%, 30%);
  --color-gray-3: hsl(0, 0%, 45%);
  --color-gray-4: hsl(0, 0%, 75%);
  --color-gray-5: hsl(0, 0%, 92%);
  --color-gray-6: hsl(0, 0%, 96%);
  --color-gray-7: hsl(0, 0%, 99%);
  --color-gray-8: hsl(0, 0%, 100%);
  --color-border: hsl(0, 0%, 70%);
  --color-raised: color-mix(in srgb, var(--color-gray-5) 60%, var(--color-gray-4));
  --color-warning: hsl(38, 96%, 53%);
  --roundness-1: 0.188rem;
  --roundness-2: 0.313rem;
  --roundness-3: 0.438rem;
  --base-line-height: 1.6;
  --base-font-size: 0.875rem;
}
/*!
 * Dark Theme
 * Set data-theme="dark" on body or any parent elements to make child elements to inherit the dark theme
 */
[data-theme="dark"] {
  color-scheme: dark;
  --color-primary: hsl(190, 97%, 38%);
  --color-primary-focus: hsl(190, 97%, 30%);
  --color-highlight: hsl(190, 97%, 25%);
  --color-success: hsl(130, 66%, 52%);
  --color-error: hsl(0, 66%, 52%);
  --color-credit: hsl(280, 70%, 70%);
  --color-link: hsl(210, 66%, 52%);
  --color-link-focus: hsl(210, 66%, 47%);
  --color-background: hsl(0, 0%, 10%);
  --color-gray-0: hsl(0, 0%, 100%);
  --color-gray-1: hsl(0, 0%, 85%);
  --color-gray-2: hsl(0, 0%, 70%);
  --color-gray-3: hsl(0, 0%, 55%);
  --color-gray-4: hsl(0, 0%, 45%);
  --color-gray-5: hsl(0, 0%, 25%);
  --color-gray-6: hsl(0, 0%, 15%);
  --color-gray-7: hsl(0, 0%, 12%);
  --color-gray-8: hsl(0, 0%, 10%);
  --color-border: hsl(0, 0%, 25%);
  /* Per theme: a var() in a custom property resolves where it is declared. */
  --color-raised: color-mix(in srgb, var(--color-gray-5) 60%, var(--color-gray-4));
}