/* Template 1 — Obsidian Gold (default)
   The look is the base in app/globals.css; this file only adds the
   few touches that would be noise on top of the other templates.

   Theme file contract (all five files):
   - first line re-declares the layer order, so this file can never
     reorder Tailwind's layers when it happens to load first;
   - tokens under `:root:root`, element rules under `:root …`, so they
     beat globals.css whatever the load order;
   - component overrides inside `@layer components`, so utilities at a
     call site still win;
   - page widgets (the `ui-*` hooks listed in app/globals.css) inside
     `@layer template`, which sits after the utilities, so a template can
     redraw a widget whatever utility classes the page put on it. Every
     state a widget can be in is an attribute (data-active, data-state,
     data-tone, data-kind) — style each one, the utility for it loses.
   Obsidian draws its widgets with the utilities alone, so it has no
   template layer. */
@layer theme, base, components, utilities, template;

@layer components {
  :root .site-header {
    border-image: linear-gradient(90deg, transparent, color-mix(in srgb, var(--gold) 55%, transparent), transparent) 1;
  }
  :root .site-brand__name {
    background: linear-gradient(180deg, var(--gold-pale), var(--gold));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}