/* ==========================================================================
   Reddit Safety Filters — design tokens (dark mode)
   Extracted from reddit.com shreddit design system on 2026-04-15.
   Only the subset we actually use for this build. See design-tokens.md
   in the parent folder for the full catalog.
   ========================================================================== */

:root {
  /* Surfaces */
  --color-neutral-background: #0E1113;                /* page canvas */
  --color-neutral-background-hover: #181C1F;          /* row hover */
  --color-neutral-background-container: #181C1F;     /* generic card */
  --color-neutral-background-container-hover: #21272A;
  --color-neutral-background-sunken: #0A0C0D;         /* FAQ panel — darker than page canvas */
  --color-neutral-background-selected: #2A3236;

  /* Text */
  --color-neutral-content-strong: #EEF1F3;           /* headings, primary labels */
  --color-neutral-content: #B7CAD4;                  /* default body */
  --color-neutral-content-weak: #8BA2AD;             /* captions, muted */
  --color-secondary-plain: #DBE4E9;                  /* filter row default */
  --color-secondary-plain-hover: #FFFFFF;

  /* Borders / dividers */
  --color-divider-default: #FFFFFF33;
  --color-neutral-border-weak: #FFFFFF19;

  /* Accents */
  --color-primary: #648EFC;                          /* link blue */
  --color-primary-hover: #90A9FD;
  --color-primary-background: #115BCA;               /* switch ON */
  --color-primary-background-hover: #1870F4;
  --color-interactive-background-disabled: #FFFFFF0C;
  --color-interactive-content-disabled: #FFFFFF3F;

  /* Switch */
  --color-switch-input-background-default: #2A3236;
  --color-switch-input-background-default-hover: #333D42;
  --color-switch-input-background-checked: #115BCA;
  --color-switch-input-background-checked-hover: #1870F4;
  --color-switch-input-background-handle: #FFFFFF;
  --size-switch-input-w: 3rem;  /* 48px */
  --size-switch-input-h: 2rem;  /* 32px */

  /* Typography */
  --font-sans: -apple-system, "system-ui", "Segoe UI", Roboto,
               "Helvetica Neue", Arial, "Apple Color Emoji",
               "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;

  /* Named roles (weight / size / line-height) */
  --font-title-1: 700 2rem/2.25rem var(--font-sans);      /* 32/36 — main page H1 */
  --font-title-2: 700 1.5rem/1.75rem var(--font-sans);    /* 24/28 — detail H1 */
  --font-title-3: 700 1.125rem/1.5rem var(--font-sans);   /* 18/24 — section heading */
  --font-group-heading: 600 1.125rem/1.5rem var(--font-sans); /* 18/24 — setting-group */
  --font-headline: 600 1rem/1.25rem var(--font-sans);     /* 16/20 */
  --font-body-1: 400 1rem/1.25rem var(--font-sans);       /* 16/20 */
  --font-body-2: 400 0.875rem/1.3125rem var(--font-sans); /* 14/21 — body default (Reddit uses 21px line height on body) */
  --font-label-1: 600 0.875rem/1.25rem var(--font-sans);  /* 14/20 */
  --font-caption-1: 400 0.75rem/1rem var(--font-sans);    /* 12/16 */

  /* Spacing */
  --spacer-2xs: 0.25rem;   /*  4px */
  --spacer-xs:  0.5rem;    /*  8px */
  --spacer-sm:  0.75rem;   /* 12px */
  --spacer-md:  1rem;      /* 16px */
  --spacer-lg:  1.5rem;    /* 24px */
  --spacer-xl:  2rem;      /* 32px */
  --spacer-2xl: 3rem;      /* 48px */

  /* Radii */
  --radius-sm: 0.25rem;    /*  4px */
  --radius-2:  0.5rem;     /*  8px */
  --radius-4:  1rem;       /* 16px — FAQ card */
  --radius-md: 1.25rem;    /* 20px */
  --radius-full: 624.9375rem;

  /* Semantic */
  --color-danger: #F44336;                               /* error / filtered result */
  --color-danger-border: #E53935;

  /* Shadow / focus */
  --elevation-focus-ring: 0 0 0 0.25rem #1870F4;
  --elevation-overlay: 0 8px 24px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.4);

  /* Motion */
  --reveal-duration: 280ms;
  --reveal-easing: cubic-bezier(0.2, 0, 0.2, 1);
}

/* ---------- Global resets & base ---------- */

*,
*::before,
*::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--color-neutral-background);
  color: var(--color-neutral-content);
  font: var(--font-body-2);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--color-primary); text-decoration: none; }
a:hover { color: var(--color-primary-hover); text-decoration: underline; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}