/* ---------------------------------------------------------------------------
   Design tokens.

   Every colour, space and size in this project comes from a variable defined
   here. If you are changing a colour, change it here, not in the component.
   --------------------------------------------------------------------------- */

:root {
  /* Brand */
  --c-accent: #ff8ae2;
  --c-accent-strong: #c026a3;
  --c-link: #0969da;
  --c-link-hover: #0550ae;

  /* Surfaces */
  --c-bg: #ffffff;
  --c-surface: #f6f8fa;
  --c-surface-2: #eaeef2;
  --c-border: #d0d7de;

  /* Text */
  --c-text: #1f2328;
  --c-text-muted: #59636e;
  --c-text-inverse: #ffffff;

  /* Semantic */
  --c-success: #1a7f37;
  --c-success-bg: #dafbe1;
  --c-warning: #9a6700;
  --c-warning-bg: #fff8c5;
  --c-danger: #cf222e;
  --c-danger-bg: #ffebe9;

  /* Code */
  --c-code-bg: #f6f8fa;
  --c-code-text: #1f2328;

  /* Spacing scale */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;

  /* Type */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans",
    Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;

  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.5rem;
  --fs-2xl: 2rem;
  --fs-3xl: 2.5rem;

  /* Other */
  --radius: 6px;
  --radius-lg: 12px;
  --shadow: 0 1px 3px rgba(31, 35, 40, 0.12);
  --shadow-lg: 0 8px 24px rgba(31, 35, 40, 0.15);
  --max-width: 1000px;
  --transition: 150ms ease;
}

/* Dark theme — applied when the viewer has chosen it. */
[data-theme="dark"] {
  --c-accent: #ff8ae2;
  --c-accent-strong: #ffb3ed;
  --c-link: #4493f8;
  --c-link-hover: #6cb6ff;

  --c-bg: #0d1117;
  --c-surface: #161b22;
  --c-surface-2: #21262d;
  --c-border: #30363d;

  --c-text: #e6edf3;
  --c-text-muted: #9198a1;
  --c-text-inverse: #0d1117;

  --c-success: #3fb950;
  --c-success-bg: #10301a;
  --c-warning: #d29922;
  --c-warning-bg: #2d2200;
  --c-danger: #f85149;
  --c-danger-bg: #3c1618;

  --c-code-bg: #161b22;
  --c-code-text: #e6edf3;

  --shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
}

/* Follow the operating system when the viewer has not chosen for themselves. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --c-accent: #ff8ae2;
    --c-accent-strong: #ffb3ed;
    --c-link: #4493f8;
    --c-link-hover: #6cb6ff;

    --c-bg: #0d1117;
    --c-surface: #161b22;
    --c-surface-2: #21262d;
    --c-border: #30363d;

    --c-text: #e6edf3;
    --c-text-muted: #9198a1;
    --c-text-inverse: #0d1117;

    --c-success: #3fb950;
    --c-success-bg: #10301a;
    --c-warning: #d29922;
    --c-warning-bg: #2d2200;
    --c-danger: #f85149;
    --c-danger-bg: #3c1618;

    --c-code-bg: #161b22;
    --c-code-text: #e6edf3;

    --shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
  }
}