/* Later layers win regardless of selector specificity or file order. */
@layer tokens, reset, base, layout, site, components, page;
/* Breakpoints. Media queries can't read custom properties (and @custom-media isn't shipped),
   so these names are a convention: label each query with its name (test/assets/stylesheets_test.rb checks).
     tablet: (max-width: 760px)
     phone:  (max-width: 480px) */
/* site: subdomain-wide sheets (app, marketing). page: controller sheets; wrap them in @layer page. */

@layer tokens {

:root {
  --content: 1200px;

  --paper:  #fbfbfa;
  --ink:    #110;
  --muted:  #565;
  --line:   #bba;
  --pop:    #cef;
  --danger: #d22;
  --accent: #26f;

  --font-size-base: 15px;

  --font-xs:  0.75rem;
  --font-sm:  0.85rem;
  --font-md:  1.00rem;
  --font-lg:  1.25rem;
  --font-xl:  2.00rem;
  --font-2xl: 4.00rem;

  --mono: "SFMono-Regular", "Cascadia Code", "Roboto Mono", menlo, consolas, monospace;
  --bold: 650;
  --font-wide:   0.10em;
  --font-tight: -0.05em;

  --pad: 2.5rem;
  --pad-2xs: calc(var(--pad) / 8);
  --pad-xs: calc(var(--pad) / 4);
  --pad-sm: calc(var(--pad) / 2);
  --pad-md: var(--pad);
  --pad-lg: calc(var(--pad) * 2);
  --pad-xl: calc(var(--pad) * 4);
  --pad-2xl: calc(var(--pad) * 8);

  --gutter: var(--pad-md);

  --line-style: solid;
  --line-style-muted: dotted;
  --border: 1px var(--line-style) var(--line);
  --border-muted: 1px var(--line-style-muted) var(--line);

  --shadow-offset: 3px;
  --shadow: var(--shadow-offset) var(--shadow-offset) 0 var(--ink);
  --shadow-pressed: 1px 1px 0 var(--ink);
  --focus: var(--accent);
}

@media (width <= 760px) { /* tablet */
  :root { --pad: 1.5rem; }
}

@media (width <= 480px) { /* phone */
  :root { --pad: 1rem; }
}

}