/* ────────────────────────────────────────────────────────────────
   DΛREΛKT_ UI — MODULE: ui.button
   Version: 3.2.0 | Genesis-Final • Bus-Aware • Wrap-Safe • Tokenized
   Classification: Atom | Interactive Control | Theme-Aware
   Maintainer: DΛREΛKT_ UI TEAM
   Host: Global (RuthBowers / DΛREΛKT Gate / Diagnostics / Dev)
   ──────────────────────────────────────────────────────────────── */

/* The atom lives inside @layer atoms; global layers must exist earlier:
   @layer base, core, atoms, siteOverrides; */

@layer atoms {
  /* ── Root Button Atom ────────────────────────────────────────── */
  [data-atom="ui.button"][data-ownedby] .da-btn {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;

    padding: var(--ui-btn-pad-y, 10px) var(--ui-btn-pad-x, 18px);
    border-radius: var(--ui-btn-radius, 999px);
    background: var(--ui-btn-bg, #fff);
    color: var(--ui-btn-fg, #000);
    border: 1px solid var(--ui-btn-bd, transparent);

    font-weight: var(--ui-btn-font-w, 600);
    font-size: var(--ui-btn-font-size, 16px);
    line-height: var(--ui-btn-line-h, 1.15);

    box-shadow: var(--ui-btn-shadow, none);
    transition:
      transform 0.06s ease,
      opacity 0.15s ease,
      box-shadow 0.15s ease,
      background-color 0.15s ease,
      border-color 0.15s ease,
      color 0.15s ease;
  }

  /* ── Hover / Focus / Disabled States ─────────────────────────── */
  [data-atom="ui.button"] .da-btn:hover:not([disabled]) {
    background: var(--ui-btn-bg-hover, var(--ui-btn-bg));
    color: var(--ui-btn-fg-hover, var(--ui-btn-fg));
    border-color: var(--ui-btn-bd-hover, var(--ui-btn-bd));
    box-shadow: var(--ui-btn-shadow-hover, var(--ui-btn-shadow));
    transform: translateY(-1px);
  }

  [data-atom="ui.button"] .da-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255,255,255,0.25);
  }

  [data-atom="ui.button"] .da-btn[disabled] {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
  }

  /* ── Sizes ───────────────────────────────────────────────────── */
  [data-atom="ui.button"] .da-btn[data-size="sm"] { font-size: 14px; padding: 8px 14px; }
  [data-atom="ui.button"] .da-btn[data-size="lg"] { font-size: 18px; padding: 14px 24px; }

  /* ── Kinds ───────────────────────────────────────────────────── */
  [data-atom="ui.button"] .da-btn[data-kind="ghost"] {
    background: transparent;
    color: var(--d-fg, #d9d9d9);
    border-color: rgba(255,255,255,0.18);
  }

  [data-atom="ui.button"] .da-btn[data-kind="link"] {
    background: transparent;
    color: var(--d-fg-strong, #f5f5f5);
    border-color: transparent;
    text-decoration: none;
  }
}

/* ── Site Overrides Layer (Wins Cascade) ──────────────────────── */
@layer siteOverrides {
  body[data-site="dareakt"] {
    --ui-btn-pad-y: 10px;
    --ui-btn-pad-x: 18px;
    --ui-btn-radius: 999px;

    --ui-btn-bg: var(--d-accent, #fff);
    --ui-btn-fg: #000;
    --ui-btn-bd: transparent;

    --ui-btn-bg-hover: var(--d-accent, #fff);
    --ui-btn-fg-hover: #000;
    --ui-btn-bd-hover: transparent;

    --ui-btn-shadow: none;
    --ui-btn-shadow-hover: none;
    --ui-btn-font-w: 600;
    --ui-btn-font-size: 16px;
    --ui-btn-line-h: 1.15;
  }

  body[data-site="dareakt"]
  [data-atom="ui.button"] .da-btn[data-kind="ghost"] {
    background: transparent;
    color: var(--d-fg, #d9d9d9);
    border-color: rgba(255,255,255,0.18);
  }

  body[data-site="dareakt"]
  [data-atom="ui.button"] .da-btn[data-kind="ghost"]:hover {
    border-color: rgba(255,255,255,0.28);
    background: rgba(255,255,255,0.06);
    color: #fff;
  }
}