/* ============================================================================
   Oceanus — Polish, round 2.
   ----------------------------------------------------------------------------
   Three surgical tweaks loaded after the base stylesheets:
     1. Primary-button cohesion — .im-btn-primary picks up the same rich
        gradient + soft accent shadow + hover lift that .btn-primary already
        had. No new buttons styled; we're aligning existing variants.
     2. Smoother global ease — the --tr-fast / --tr-base / --tr-slow tokens
        switch from plain `ease` to a soft cubic-bezier ("snap-out") so every
        hover/focus transition app-wide feels more refined. Same curve was
        already used ad-hoc in a few places — now consistent.
     3. Focus-visible ring — replaces the browser-default outline with a
        soft 2-layer accent ring (page-colored spacer + accent halo). Better
        keyboard nav, no visual cost during mouse use.

   To revert: delete the <link> in base.html.
   ========================================================================== */

/* ----------------------------------------------------------------------------
   #2 — Smoother transition tokens.
   Same authoring curve as the ad-hoc uses already in style.css.
   -------------------------------------------------------------------------- */
:root {
  --tr-fast: 150ms cubic-bezier(0.2, 0.7, 0.3, 1);
  --tr-base: 200ms cubic-bezier(0.2, 0.7, 0.3, 1);
  --tr-slow: 300ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* ----------------------------------------------------------------------------
   #1 — Bring .im-btn-primary in line with the gradient .btn-primary defined
   in tokens.css. Without this, the IM "Send" and "Create" buttons stayed
   flat solid-color while every other primary button felt elevated.
   -------------------------------------------------------------------------- */
.im-btn-primary {
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--accent) 92%, #fff 8%) 0%,
      var(--accent) 55%,
      color-mix(in srgb, var(--accent) 80%, #000 20%) 100%) !important;
  color: var(--text-inverse) !important;
  border: 1px solid color-mix(in srgb, var(--accent) 85%, #fff 15%) !important;
  box-shadow:
    0 1px 0 0 color-mix(in srgb, #fff 30%, transparent) inset,
    0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent),
    0 8px 24px -10px color-mix(in srgb, var(--accent) 70%, transparent),
    0 2px 6px -2px  color-mix(in srgb, var(--accent) 50%, transparent);
  transition: transform var(--tr-fast), box-shadow var(--tr-fast), filter var(--tr-fast);
}
.im-btn-primary:hover:not(:disabled) {
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--accent) 80%, #fff 20%) 0%,
      var(--accent-hover) 55%,
      var(--accent) 100%) !important;
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 0 color-mix(in srgb, #fff 40%, transparent) inset,
    0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent),
    0 14px 32px -10px color-mix(in srgb, var(--accent) 80%, transparent),
    0 4px 12px -2px  color-mix(in srgb, var(--accent) 60%, transparent);
}
.im-btn-primary:active:not(:disabled) {
  transform: translateY(0);
}
.im-btn-primary:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
}

/* ----------------------------------------------------------------------------
   #3 — Focus-visible ring. Soft 2-layer accent halo replaces the harsh
   browser-default outline. `:focus-visible` only triggers for keyboard
   navigation (not mouse clicks), so the UI stays clean for pointer users.
   -------------------------------------------------------------------------- */
:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px var(--bg-base),
    0 0 0 4px color-mix(in srgb, var(--accent) 55%, transparent);
  border-radius: 4px;
  transition: box-shadow var(--tr-fast);
}

/* Buttons and form controls already have their own focus styling — opt them
   out of the global ring so we don't double-stack rings on .btn-primary etc.
   They keep their accent border + shadow as currently defined. */
.btn-primary:focus-visible,
.im-btn-primary:focus-visible,
.btn-danger:focus-visible,
.btn-ghost:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  box-shadow: inherit;
  outline: none;
}