/* pastebin.ca · Web Awesome theme bridge — SLATE design system
 *
 * Loads Web Awesome's own token bundle (wa-base.css) first to ensure every
 * --wa-color-*-fill-loud, --wa-color-*-border-loud, --wa-color-*-on-loud,
 * --wa-color-surface-*, --wa-color-text-* etc. resolves to a real value.
 * Without this the brand button renders transparent + dark gray.
 *
 * After WA's defaults load, this file overrides the brand colour ramp and
 * neutral surfaces so wa-* components inherit the Slate aesthetic from
 * branding.css (--pb-accent, --pb-surface, --pb-ink, --pb-font-sans, …).
 *
 * Single source of truth for --pb-* → --wa-* mapping. Add new alias rows
 * here, never inside a component .css file. */
@import url('/wa-base.css') layer(wa-theme);

@layer wa-theme-overrides {
  :where(:root) {
    /* --- Brand ramp (Slate orange paste accent) ---------------------------
     * wa-button[variant="brand"] reads --wa-color-brand-fill-loud (for the
     * button background), --wa-color-brand-on-loud (the text on top), and
     * --wa-color-brand-border-loud (border). Web Awesome 3 also exposes a
     * full 05..95 ramp via the variant layer. We override both so:
     *
     *   - the WA default ramp now comes from our --pb-accent palette
     *   - any component reaching for brand-50/60/95 gets a Slate shade
     *
     * Derivation uses color-mix in oklch so we keep one source colour
     * (--pb-accent) and don't have to maintain a hand-tuned 11-stop ramp. */
    --wa-color-brand-95: color-mix(in oklch, var(--pb-accent) 8%,  white);
    --wa-color-brand-90: color-mix(in oklch, var(--pb-accent) 16%, white);
    --wa-color-brand-80: color-mix(in oklch, var(--pb-accent) 32%, white);
    --wa-color-brand-70: color-mix(in oklch, var(--pb-accent) 52%, white);
    --wa-color-brand-60: color-mix(in oklch, var(--pb-accent) 78%, white);
    --wa-color-brand-50: var(--pb-accent);
    --wa-color-brand-40: color-mix(in oklch, var(--pb-accent) 82%, black);
    --wa-color-brand-30: color-mix(in oklch, var(--pb-accent) 64%, black);
    --wa-color-brand-20: color-mix(in oklch, var(--pb-accent) 46%, black);
    --wa-color-brand-10: color-mix(in oklch, var(--pb-accent) 26%, black);
    --wa-color-brand-05: color-mix(in oklch, var(--pb-accent) 14%, black);
    --wa-color-brand: var(--pb-accent);
    --wa-color-brand-on: var(--pb-accent-fg, white);

    /* Token rebases the WA button + callout + badge consume directly.
     * (WA's themes/default.css declares these in terms of --wa-color-brand-*
     * shades, so the overrides above would propagate; we redeclare here so
     * specificity is unambiguous regardless of cascade-layer order.) */
    --wa-color-brand-fill-quiet:  var(--wa-color-brand-95);
    --wa-color-brand-fill-normal: var(--wa-color-brand-90);
    --wa-color-brand-fill-loud:   var(--wa-color-brand-50);
    --wa-color-brand-border-quiet:  var(--wa-color-brand-90);
    --wa-color-brand-border-normal: var(--wa-color-brand-70);
    --wa-color-brand-border-loud:   var(--wa-color-brand-60);
    --wa-color-brand-on-quiet:  var(--wa-color-brand-40);
    --wa-color-brand-on-normal: var(--wa-color-brand-30);
    --wa-color-brand-on-loud:   var(--pb-accent-fg, white);

    /* --- Surfaces + ink (Slate paper) -------------------------------- */
    --wa-color-surface-raised:  var(--pb-bg);
    --wa-color-surface-default: var(--pb-surface);
    --wa-color-surface-lowered: var(--pb-panel);
    --wa-color-surface-border:  var(--pb-hair-2);

    --wa-color-text-normal: var(--pb-ink);
    --wa-color-text-quiet:  var(--pb-mute);
    --wa-color-text-link:   var(--pb-accent-ink, var(--pb-accent));

    /* --- Typography -------------------------------------------------- */
    --wa-font-family-body:    var(--pb-font-sans);
    --wa-font-family-heading: var(--pb-font-sans);
    --wa-font-family-code:    var(--pb-font-mono);

    /* --- Shape + elevation ------------------------------------------- */
    --wa-border-radius-s:    var(--pb-radius-sm, 4px);
    --wa-border-radius-m:    var(--pb-radius, 6px);
    --wa-border-radius-l:    var(--pb-radius-md, 8px);
    --wa-border-radius-pill: 9999px;

    --wa-shadow-s: 0 1px 2px rgba(0, 0, 0, .06);
    --wa-shadow-m: 0 4px 12px rgba(0, 0, 0, .08);
    --wa-shadow-l: var(--pb-shadow-2, 0 14px 34px rgba(0, 0, 0, .14));

    /* --- Form controls + focus ring ---------------------------------- */
    --wa-form-control-border-color:        var(--pb-hair-2);
    --wa-form-control-border-color-hover:  var(--pb-hair-3);
    --wa-form-control-border-color-focus:  var(--pb-accent);
    --wa-form-control-background-color:    var(--pb-surface);
    --wa-form-control-color:               var(--pb-ink);
    --wa-form-control-placeholder-color:   var(--pb-mute);

    --wa-focus-ring-color:  var(--pb-accent);
    --wa-focus-ring-width:  2px;
    --wa-focus-ring-offset: 2px;
  }

  /* Dark mode rides our existing chrome theme machinery.
   * Slate's dark tokens are richer than the WA defaults, so override the
   * surfaces + text again so wa-* components track the page theme. */
  :where(:root[data-theme="dark"]) {
    --wa-color-surface-raised:  var(--pb-bg);
    --wa-color-surface-default: var(--pb-surface);
    --wa-color-surface-lowered: var(--pb-panel);
    --wa-color-surface-border:  var(--pb-hair-2);
    --wa-color-text-normal:     var(--pb-ink);
    --wa-color-text-quiet:      var(--pb-mute);
    --wa-color-text-link:       var(--pb-accent-ink);
    --wa-color-brand-on-loud:   var(--pb-accent-fg, #11111a);
  }
  @media (prefers-color-scheme: dark) {
    :where(:root:not([data-theme="light"]):not([data-theme="dark"])) {
      --wa-color-surface-raised:  var(--pb-bg);
      --wa-color-surface-default: var(--pb-surface);
      --wa-color-surface-lowered: var(--pb-panel);
      --wa-color-surface-border:  var(--pb-hair-2);
      --wa-color-text-normal:     var(--pb-ink);
      --wa-color-text-quiet:      var(--pb-mute);
      --wa-color-text-link:       var(--pb-accent-ink);
      --wa-color-brand-on-loud:   var(--pb-accent-fg, #11111a);
    }
  }
}

/* ---------------------------------------------------------------------
 * FOUCE (Flash of Undefined Custom Elements)
 *
 * Web Awesome components render as inert <wa-*> tags before their JS
 * registers them — without this they'd briefly appear as zero-size boxes
 * or unstyled text. Hide each wa-* element until customElements.define()
 * activates it; the :defined pseudo flips and the element reveals itself
 * with full styling once the bundle has run.
 *
 * Scoped to wa-* prefix only so it can't accidentally hide pb-* custom
 * elements (paste-view, decrypt-form, etc.). */
wa-dropdown:not(:defined),
wa-dropdown-item:not(:defined),
wa-dialog:not(:defined),
wa-select:not(:defined),
wa-option:not(:defined),
wa-switch:not(:defined),
wa-slider:not(:defined),
wa-tooltip:not(:defined),
wa-callout:not(:defined),
wa-tag:not(:defined),
wa-badge:not(:defined),
wa-button:not(:defined),
wa-icon:not(:defined),
wa-input:not(:defined),
wa-textarea:not(:defined),
wa-copy-button:not(:defined),
wa-details:not(:defined),
wa-avatar:not(:defined),
wa-spinner:not(:defined),
wa-popup:not(:defined),
wa-tab:not(:defined),
wa-tab-group:not(:defined),
wa-tab-panel:not(:defined) {
  visibility: hidden;
}