/* boing_bot design tokens.
   The source of truth for the colors, typography, spacing, radii, elevation and motion of the website.
   MudBlazor's theme is filled from these values (see README.md, "Mapping to MudBlazor"). Widgets don't use this file.

   Themes: the light values live on :root. The dark values apply when the visitor's system prefers dark and no
   explicit choice is set, and always when the server sets data-theme="dark" from the theme cookie. */

:root {
  color-scheme: light;

  /* Surfaces and text */
  --color-bg: #f3f6f8;              /* page background */
  --color-surface: #ffffff;         /* cards, tables, inputs, app bar */
  --color-fg: #172129;              /* text */
  --color-fg-muted: #56687a;        /* secondary text, labels, placeholders (4.5:1 on bg and surface) */
  --color-border: #d3dde4;          /* dividers, table lines */
  --color-border-strong: #7d8f9e;   /* input and button borders (3:1 on bg and surface) */

  /* Accent: the logo cyan, darkened until text and buttons pass */
  --color-accent: #197994;          /* primary actions, links, the current song, selected navigation */
  --color-accent-hover: #146276;
  --color-on-accent: #ffffff;       /* text on accent */
  --color-accent-soft: #e0f4fa;     /* selected rows, badges, active navigation background */

  /* Semantic colors: text and icons on bg and surface */
  --color-success: #1d8046;         /* requests open, saved, enabled */
  --color-warning: #9e6300;         /* requests closed, notices that need attention */
  --color-danger: #c62828;          /* errors, destructive actions, live */
  --color-danger-strong: #c62828;   /* background of destructive buttons */
  --color-on-danger: #ffffff;
  --color-live: var(--color-danger);
  --color-focus: var(--color-accent);
  --color-backdrop: rgb(23 33 41 / 0.5);

  /* Typography */
  --font-sans: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --text-xs: 12px;                  /* table headers, badges, captions */
  --text-sm: 13px;                  /* help texts, secondary lines */
  --text-md: 14px;                  /* body, tables, controls */
  --text-lg: 16px;                  /* lead paragraphs, dialog text */
  --text-xl: 20px;                  /* page titles */
  --text-2xl: 24px;                 /* dashboard overview numbers */
  --text-3xl: 28px;                 /* landing page */
  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --weight-regular: 400;
  --weight-medium: 500;             /* song titles, labels, buttons */
  --weight-semibold: 600;           /* headings, badges */
  --tracking-caps: 0.05em;          /* uppercase table headers and labels */

  /* Spacing, 4 px base */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  /* Radii */
  --radius-sm: 3px;                 /* badges, tags */
  --radius: 6px;                    /* controls, cards, tables, dialogs */
  --radius-lg: 10px;                /* widget preview, large panels */
  --radius-pill: 999px;             /* status pills */

  /* Elevation: flat by default; shadows only for things that float */
  --shadow-raised: 0 1px 2px rgb(23 33 41 / 0.06), 0 2px 8px rgb(23 33 41 / 0.08);     /* notices, popovers */
  --shadow-overlay: 0 4px 16px rgb(23 33 41 / 0.16), 0 12px 40px rgb(23 33 41 / 0.16); /* dialogs, menus */

  /* Motion */
  --duration-fast: 120ms;           /* hover, focus */
  --duration-normal: 200ms;         /* notices, drawers */
  --ease: cubic-bezier(0.2, 0, 0, 1);

  /* Layout */
  --content-max: 1200px;
  --measure: 65ch;                  /* running text */
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --color-bg: #10181e;
    --color-surface: #18222a;
    --color-fg: #e4ecf1;
    --color-fg-muted: #8fa3b3;
    --color-border: #2a3843;
    --color-border-strong: #596d7f;
    --color-accent: #22a7cc;
    --color-accent-hover: #3fb5d6;
    --color-on-accent: #07141a;
    --color-accent-soft: #0c3946;
    --color-success: #4fc37f;
    --color-warning: #e3a53a;
    --color-danger: #ef5350;
    --color-danger-strong: #c62828;
    --color-on-danger: #ffffff;
    --color-backdrop: rgb(0 0 0 / 0.6);
    --shadow-raised: 0 1px 2px rgb(0 0 0 / 0.3), 0 2px 8px rgb(0 0 0 / 0.3);
    --shadow-overlay: 0 4px 16px rgb(0 0 0 / 0.4), 0 12px 40px rgb(0 0 0 / 0.4);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: #10181e;
  --color-surface: #18222a;
  --color-fg: #e4ecf1;
  --color-fg-muted: #8fa3b3;
  --color-border: #2a3843;
  --color-border-strong: #596d7f;
  --color-accent: #22a7cc;
  --color-accent-hover: #3fb5d6;
  --color-on-accent: #07141a;
  --color-accent-soft: #0c3946;
  --color-success: #4fc37f;
  --color-warning: #e3a53a;
  --color-danger: #ef5350;
  --color-danger-strong: #c62828;
  --color-on-danger: #ffffff;
  --color-backdrop: rgb(0 0 0 / 0.6);
  --shadow-raised: 0 1px 2px rgb(0 0 0 / 0.3), 0 2px 8px rgb(0 0 0 / 0.3);
  --shadow-overlay: 0 4px 16px rgb(0 0 0 / 0.4), 0 12px 40px rgb(0 0 0 / 0.4);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-normal: 0ms;
  }
}