/* ============================================
   Design Tokens
   Change a token, change everything. Every rule in app/assets/stylesheets reads its colours,
   type, spacing and radius from tokens, as Lucas's Rails + Hotwire CSS guide has it (spike #218,
   #284). The guide's own tokens come from its gem, pal_e_design, whose two stylesheets the
   layout links before this file: every token at its light value, then each colour's dark value.
   Here are only the guide's tokens this app sets otherwise, and this app's own. Each colour set
   here has its dark value beside it, though it may be the gem's, since a light value set here
   would win in dark too. A part that needs a colour of its own sets it in a :root block at the
   top of its own file, with its dark value beside it. test/assets/stylesheets_test.rb holds
   every file to that, and checks the colours read together, in light and in dark.
   ============================================ */
:root {
  /* Colours: the guide's names, then this app's own, each named for its role */
  --color-bg: #f8f9fa;
  --color-text: #1a1a2e;
  --color-muted: #5f6870;
  --color-link: #4a6fa5;
  --color-border: #dee2e6;
  --color-accent: #4a6fa5;
  --color-danger: #b02a37;
  --color-success: #146c43;
  --color-warning: #8a6900;          /* a degraded sync */
  --color-nav-bg: #1a1a2e;
  --color-nav-text: #e0e0e0;
  --color-nav-text-active: #ffffff;
  --color-notice-bg: #d4edda;
  --color-alert-bg: #f8d7da;
  --color-focus: #4a6fa5;            /* the ring round a focused link or button */

  /* Type: the system's own font, since no web font is loaded, and a scale of the sizes in use */
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-size-3xs: 0.7rem;
  --font-size-2xs: 0.75rem;
  --font-size-xs: 0.8rem;
  --font-size-sm: 0.875rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.1rem;
  --font-size-xl: 1.5rem;

  /* Spacing and shape */
  --radius-sm: 3px;                  /* a badge */
  --tap-target: 44px;                /* the least height of a link or button outside running text */
}

/* Dark, as the device is set (DESIGN-02): every colour token set above, again for a dark screen */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #121418;
    --color-text: #e6e8eb;
    --color-muted: #a4abb5;
    --color-link: #8fb0e0;
    --color-border: #2e333b;
    --color-accent: #8fb0e0;
    --color-danger: #f08a93;
    --color-success: #5cc98a;
    --color-warning: #e3b341;
    --color-nav-bg: #0b0c0f;
    --color-nav-text: #c9cdd3;
    --color-nav-text-active: #ffffff;
    --color-notice-bg: #1d3a2a;
    --color-alert-bg: #4a2228;
    --color-focus: #8fb0e0;
  }
}

/* ============================================
   Reset
   ============================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font-body);
  font-size: var(--font-size-md);
  line-height: 1.5;
  color: var(--color-text);
  background: var(--color-bg);
}

/* A focused link or button shows a ring when the keyboard put the focus there */
:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

/* A link takes the link token, in light and in dark, unless its part gives it a colour of its own (#516) */
a { color: var(--color-link); }

/* ============================================
   Layout: one container, built for a phone first (PHONE-01), wider from 600px, the one breakpoint
   ============================================ */
.content {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--spacing-md);
}

@media (min-width: 600px) {
  .content { padding: var(--spacing-lg) var(--spacing-md); }
}

/* ============================================
   Type
   ============================================ */
h1 { margin-bottom: var(--spacing-lg); }
h2 { margin-bottom: var(--spacing-sm); }