/*
 * Myras design tokens — DESIGN.md §2 source of truth.
 *
 * Loaded AFTER `tabler.min.css`, so overriding Tabler's `--tblr-*`
 * custom properties re-skins the whole template without touching
 * Tabler's own CSS.
 *
 * Important: Tabler 1.4.0's vendored CSS does NOT honour the
 * `data-bs-theme-base`, `data-bs-theme-font`, `data-bs-theme-primary`,
 * or `data-bs-theme-radius` attributes — those work only via Tabler's
 * online customizer. Every token below must therefore be declared
 * explicitly here for the theme to apply.
 */

:root,
[data-bs-theme="light"] {

  /* Typography — monospace stack (DESIGN.md §2.4) ---------------------- */
  /*
   * Tabler 1.4.0's vendored CSS already ships the exact stack the
   * preview customizer uses for `theme-font = monospace`
   * (`Monaco, Consolas, "Liberation Mono", "Courier New", monospace`),
   * so we DON'T override `--tblr-font-monospace` — overriding here is
   * how we introduced a platform-dependent drift in the past.
   * Instead, just point `--tblr-body-font-family` at the monospace
   * variable so the whole app runs on that stack.
   */
  --tblr-body-font-family: var(--tblr-font-monospace);

  /* Match Tabler's newer default body font-size (preview.tabler.io
   * ships 0.8rem = 12.8px; vendored 1.4.0 shipped 0.875rem = 14px).
   * Overriding here pulls the whole app onto the tighter scale used
   * by the design reference. */
  --tblr-body-font-size: 0.8rem;

  /* Primary — orange brand (DESIGN.md §2.1) ---------------------------- */
  --tblr-primary: #f76707;
  --tblr-primary-rgb: 247, 103, 7;
  --tblr-primary-fg: #ffffff;
  --tblr-primary-darken: #c55206;   /* hover */
  --tblr-primary-lighten: #fddfc5;  /* subtle bg */
  --tblr-link-color: #c55206;
  --tblr-link-color-rgb: 197, 82, 6;
  --tblr-link-hover-color: #943d04;
  --tblr-link-hover-color-rgb: 148, 61, 4;

  /* Border radius (DESIGN.md §2.6) ------------------------------------- */
  /* Tabler 1.4.0 vendored values for `sm` (4px) and base (6px) already
   * match the DESIGN.md targets, so only `md`, `lg`, `xl` need to be
   * pushed up. btn-sm stays close to the default so small controls
   * don't look square. */
  --tblr-border-radius-md: 0.5625rem; /* was 6px  → 9px  */
  --tblr-border-radius-lg: 0.75rem;   /* was 8px  → 12px */
  --tblr-border-radius-xl: 1.5rem;    /* was 1rem → 24px */
}

/* Modal backdrop ------------------------------------------------------- */
/* Tabler 1.4.0 declares `--tblr-backdrop-opacity: 0.24` inside the
 * `.modal-backdrop` rule itself, so an override on `:root` would lose
 * the cascade — the local declaration wins. Re-set the variable on
 * the same selector to push the overlay from a barely-there dim
 * (0.24) up to a proper "the page is paused" overlay, matching the
 * dim intensity used by Typeform / Linear / most modern editors. */
.modal-backdrop {
  --tblr-backdrop-opacity: 0.7;
}