/* ==========================================================================
   Theme: default

   The neutral look a page under preview/ gets in a realm that has no theme of its own, until the
   realm has one. It sets no colours and no shapes: the shell and the blocks take the app's own
   tokens (--background, --foreground, --primary, --border, --radius ...) as they are, so the page
   follows the realm's hue and its colour mode.

   It does set every --theme-* token, to the value the block styles fall back to. That makes this
   file the list of tokens a theme can set; docs/theming.md says what each one does.
   ========================================================================== */

[data-theme="default"] {
  /* Type */
  --theme-font-body: inherit;
  --theme-font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  /* The emphasis phrase of a hero's heading (an em element) */
  --theme-emphasis-font: inherit;
  --theme-emphasis-style: italic;
  --theme-emphasis-weight: inherit;
  --theme-emphasis-color: var(--primary);
  --theme-emphasis-decoration: none;
  --theme-emphasis-background: transparent;
  --theme-emphasis-padding: 0;
  --theme-emphasis-radius: 0;

  /* A card of a card list */
  --theme-card-gap: 0.5rem;
  --theme-card-padding: 1.25rem;
  --theme-card-border: 1px solid var(--border);
  --theme-card-rule: 1px solid var(--border);
  --theme-card-radius: 0.75rem;
  --theme-card-background: var(--card);

  /* The numbers of a numbered card list: a counter style and the badge around the number */
  --theme-number-style: decimal;
  --theme-number-suffix: "";
  --theme-number-size: 1.75rem;
  --theme-number-font-size: 0.875rem;
  --theme-number-radius: 9999px;
  --theme-number-background: var(--primary);
  --theme-number-color: var(--primary-foreground);

  /* A figure of a stat strip */
  --theme-stat-size: 2rem;
  --theme-stat-color: inherit;

  /* A call to action band */
  --theme-band-padding: 2rem;
  --theme-band-radius: 0.75rem;
  --theme-band-background: var(--muted);
  --theme-band-color: inherit;
  --theme-band-text-color: var(--muted-foreground);

  /* A callout: -border is the whole border, -rule the left edge on its own */
  --theme-callout-padding: 1rem 1.25rem;
  --theme-callout-border: 1px solid var(--border);
  --theme-callout-rule: 1px solid var(--border);
  --theme-callout-radius: 0.5rem;
  --theme-callout-background: var(--muted);

  /* An FAQ: the rule between questions, and the marker at the end of a question */
  --theme-faq-rule: 1px solid var(--border);
  --theme-faq-marker-closed: "+";
  --theme-faq-marker-open: "\2212";

  /* The header and the footer: padding, the rule that closes the header and opens the footer, and
     the ground; the footer's headings and the rule over its legal line */
  --theme-header-padding: 1rem 1.5rem;
  --theme-header-rule: 1px solid var(--border);
  --theme-header-background: var(--background);
  --theme-footer-padding: 2.5rem 1.5rem;
  --theme-footer-rule: 1px solid var(--border);
  --theme-footer-background: transparent;
  --theme-footer-heading-tracking: 0.08em;
  --theme-footer-legal-rule: 1px solid var(--border);

  /* The blog: the rule between posts, and the one under a post's header */
  --theme-blog-rule: 1px solid var(--border);

  /* A form field: padding, the whole border, the radius, the ground */
  --theme-field-padding: 0.5rem 0.75rem;
  --theme-field-border: 1px solid var(--input);
  --theme-field-radius: calc(var(--radius) - 2px);
  --theme-field-background: var(--background);

  /* A comparison table: the rule under each row and the one under the column headers */
  --theme-table-rule: 1px solid var(--border);
  --theme-table-head-rule: 2px solid var(--foreground);
}