/**
 * PlayStop theme: font, colors and the base elements shared by the popup and
 * the Allowed sites page. Each page adds its own layout in its own stylesheet.
 *
 * Website copy of the extension's styles/theme.css, used by the home page and
 * the privacy policy so the site matches the extension. Keep the two in step.
 */

/* Public Sans, bundled so no page loads anything from the internet (license: fonts/OFL.txt).
   Unlike the extension, the website downloads the font, so `swap` shows the
   fallback font at once instead of hiding text for up to three seconds on a
   slow connection. */
@font-face {
  font-family: "Public Sans";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/public-sans.woff2") format("woff2");
}

/* Colors from the PlayStop design guide, light theme first, dark theme below */
:root {
  --bg: #F6F8F7;           /* page ground */
  --surface: #FFFFFF;      /* cards, rows */
  --text: #1B2421;
  --muted: #4E5B56;
  --primary: #3E7C6B;      /* buttons, links, switch on */
  --primary-hover: #336757;
  --on-primary: #FFFFFF;   /* text and switch knob on primary */
  --tint: #E3EEEA;         /* selected row */
  --on-tint: #24493F;
  --border: #CBD6D1;
  --control: #7D8A85;      /* switch off */
  --on-control: #FFFFFF;   /* switch knob when off */
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1D2120;
    --surface: #262B29;
    --text: #E6ECE9;
    --muted: #A3B0AA;
    --primary: #76B7A4;
    --primary-hover: #8CC6B5;
    --on-primary: #0F1F1A;
    --tint: #243A33;
    --on-tint: #BFE0D5;
    --border: #3A4440;
    --control: #76827D;
    --on-control: #E6ECE9;
  }
}

/* Elements below set their own display, which would otherwise override the hidden attribute. */
[hidden] {
  display: none !important;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.45 "Public Sans", system-ui, sans-serif;
}

h1,
p {
  margin: 0;
}

:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* Controls are disabled only for the moment a change is being saved. */
:disabled {
  cursor: progress;
}

a {
  color: var(--primary);
  font-weight: 500;
}

a:hover {
  color: var(--primary-hover);
}

/* --- Brand header --------------------------------------------------------- */

.header {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 600;
}

/* --- Card ----------------------------------------------------------------- */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
}

/* --- Buttons -------------------------------------------------------------- */

.button {
  height: 44px;
  padding: 0 16px;
  border: 0;
  border-radius: 6px;
  background: var(--primary);
  color: var(--on-primary);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.button:hover {
  background: var(--primary-hover);
}

/* A button that reads as a link: for actions that don't need the weight of a filled button. */
.text-button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--primary);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
}

.text-button:hover {
  color: var(--primary-hover);
  text-decoration: underline;
}